feat: export theme augmentation

Remove augmentation of styled-components in favor of the
carbonio-design-system one

* build(deps): update design system dep
* chore: update thirdparties
* refactor: move augmentation in separated file and remove export
* feat: export theme augmentation to make it available to modules

Refs: (#560)

Author: beawar

THIRDPARTIES

@@ -10,6 +10,7 @@ MIT License (MIT) applies to:
 @microsoft/api-extractor, Copyright (c) Microsoft Corporation. All rights reserved.
 @sentry/browser, Copyright (c) 2019 Sentry (https://sentry.io) and individual contributors. All rights reserved.
 @svgr/webpack, Copyright 2017 Smooth Code
+@testing-library/dom, Copyright (c) 2017 Kent C. Dodds
 @testing-library/jest-dom, Copyright (c) 2017 Kent C. Dodds
 @testing-library/react, Copyright (c) 2017 Kent C. Dodds
 @testing-library/user-event, Copyright (c) 2020 Giorgio Polvara
@@ -21,7 +22,6 @@ MIT License (MIT) applies to:
 @types/react-dom, Copyright (c) Microsoft Corporation.
 @types/react-router-dom, Copyright (c) Microsoft Corporation.
 @types/react, Copyright (c) Microsoft Corporation.
-@types/styled-components, Copyright (c) Microsoft Corporation.
 @types/ua-parser-js, Copyright (c) Microsoft Corporation.
 @types/webpack-env, Copyright (c) Microsoft Corporation.
 @types/webpack, Copyright (c) Microsoft Corporation.
@@ -32,6 +32,7 @@ copy-webpack-plugin, Copyright JS Foundation and other contributors
 core-js, Copyright (c) 2014-2024 Denis Pushkarev
 css-loader, Copyright JS Foundation and other contributors
 darkreader, Copyright (c) 2024 Dark Reader Ltd.
+date-fns, Copyright (c) 2021 Sasha Koss and Lesha Koss https://kossnocorp.mit-license.org
 eslint-plugin-notice, Copyright (c) 2017 Nick Deis
 history, Copyright (c) React Training 2016-2020. Copyright (c) Remix Software 2020-2021
 html-webpack-plugin, Copyright JS Foundation and other contributors
@@ -49,8 +50,10 @@ lodash, Copyright OpenJS Foundation and other contributors <https://openjsf.org/
 mini-css-extract-plugin, Copyright JS Foundation and other contributors
 msw, Copyright (c) 2018–present Artem Zakharchenko
 postcss-loader, Copyright JS Foundation and other contributors
+posthog-js, Copyright 2020 Posthog / Hiberly, Inc.*
 react-dom, Copyright (c) Facebook, Inc. and its affiliates.
 react-i18next, Copyright (c) 2023 i18next
+react-router-dom-v5-compat, Copyright (c) React Training LLC 2015-2019. Copyright (c) Remix Software Inc. 2020-2021. Copyright (c) Shopify Inc. 2022-2023
 react-router-dom, Copyright (c) React Training 2015-2019. Copyright (c) Remix Software 2020-2022
 react, Copyright (c) Facebook, Inc. and its affiliates.
 styled-components, Copyright (c) 2016-present Glen Maddern and Maximilian Stoiber
@@ -405,11 +408,19 @@ You should also get your employer (if you work as a programmer) or school, if an
 
 
 
+BSD* (BSD*) applies to:
+
+babel-plugin-transform-import-meta, Copyright (c) 2019 javiertury
+
+
+
+
+
 BSD 2-Clause "Simplified" License (BSD-2-Clause) applies to:
 
 dotenv, Copyright (c) 2015, Scott Motte. All rights reserved.
 
-Copyright (c) <year> <owner>
+Copyright (c) <year> <owner> 
 
 Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
 

api-extractor/carbonio-shell-ui.api.md

@@ -11,7 +11,6 @@ import { BadgeInfo as BadgeInfo_2 } from '../../lib';
 import type { CaptureOptions } from 'posthog-js';
 import { CarbonioModule as CarbonioModule_2 } from '../../types/apps';
 import type { ComponentType } from 'react';
-import type { DefaultTheme } from 'styled-components';
 import { DropdownItem } from '@zextras/carbonio-design-system';
 import type { DynamicThemeFix } from 'darkreader';
 import type { Event as Event_2 } from '@sentry/browser';
@@ -23,6 +22,7 @@ import type { Properties } from 'posthog-js';
 import { default as React_2 } from 'react';
 import type { ReactNode } from 'react';
 import type { TFunction } from 'i18next';
+import type { Theme } from '@zextras/carbonio-design-system';
 import type { To } from 'history';
 
 // @public (undocumented)
@@ -332,7 +332,7 @@ export type BadgeInfo = {
     icon?: string;
     count?: number;
     showCount?: boolean;
-    color?: keyof DefaultTheme['palette'];
+    color?: keyof Theme['palette'];
 };
 
 // @public (undocumented)

package-lock.json

@@ -106,7 +106,7 @@
 		"@fontsource/roboto": "^5.0.8",
 		"@sentry/browser": "^7.103.0",
 		"@tinymce/tinymce-react": "^4.3.2",
-		"@zextras/carbonio-design-system": "9.0.0-devel.7",
+		"@zextras/carbonio-design-system": "9.0.0-devel.13",
 		"@zextras/carbonio-ui-preview": "^3.1.0",
 		"darkreader": "^4.9.79",
 		"date-fns": "^4.1.0",
@@ -128,7 +128,7 @@
 		"zustand": "^4.5.1"
 	},
 	"peerDependencies": {
-		"@zextras/carbonio-design-system": "9.0.0-devel.7",
+		"@zextras/carbonio-design-system": "9.0.0-devel.13",
 		"@zextras/carbonio-ui-preview": "^3.1.0",
 		"core-js": "^3.39.0",
 		"lodash": "^4.17.21",

package.json

@@ -13,14 +13,16 @@ import React, {
 	useState
 } from 'react';
 
-import type { ThemeProviderProps as UIThemeProviderProps } from '@zextras/carbonio-design-system';
+import type {
+	Theme,
+	ThemeProviderProps as UIThemeProviderProps
+} from '@zextras/carbonio-design-system';
 import {
 	generateColorSet,
 	ThemeProvider as UIThemeProvider
 } from '@zextras/carbonio-design-system';
 import { auto, disable, enable, setFetchMethod } from 'darkreader';
 import { map, reduce } from 'lodash';
-import type { DefaultTheme } from 'styled-components';
 import { createGlobalStyle, css } from 'styled-components';
 
 import { useGetPrimaryColor } from './use-get-primary-color';
@@ -30,7 +32,7 @@ import { getAutoScalingFontSize } from '../settings/components/utils';
 import { useLocalStorage } from '../shell/hooks/useLocalStorage';
 import type { ScalingSettings } from '../types/settings';
 
-export type ThemeExtension = (theme: DefaultTheme) => DefaultTheme;
+export type ThemeExtension = (theme: Theme) => Theme;
 
 setFetchMethod(window.fetch);
 
@@ -48,13 +50,13 @@ export const ThemeCallbacksContext = createContext<ThemeCallbacks>({
 	}
 });
 
-type CustomTheme = Partial<Omit<DefaultTheme, 'palette'>> & {
-	palette?: Partial<DefaultTheme['palette']>;
+type CustomTheme = Partial<Omit<Theme, 'palette'>> & {
+	palette?: Partial<Theme['palette']>;
 };
 
 const paletteExtension =
 	(customTheme: CustomTheme = {}) =>
-	(theme: DefaultTheme): DefaultTheme => ({
+	(theme: Theme): Theme => ({
 		...theme,
 		...customTheme,
 		palette: {
@@ -126,14 +128,12 @@ interface ThemeProviderProps {
 export const ThemeProvider = ({ children }: ThemeProviderProps): React.JSX.Element => {
 	const [localStorageSettings] = useLocalStorage<ScalingSettings>(LOCAL_STORAGE_SETTINGS_KEY, {});
 
-	const [extensions, setExtensions] = useState<Partial<Record<keyof DefaultTheme, ThemeExtension>>>(
-		{}
-	);
+	const [extensions, setExtensions] = useState<Partial<Record<keyof Theme, ThemeExtension>>>({});
 
 	const primaryColor = useGetPrimaryColor();
 
 	useLayoutEffect(() => {
-		const customThemePalette: Partial<DefaultTheme['palette']> = primaryColor
+		const customThemePalette: Partial<Theme['palette']> = primaryColor
 			? { primary: generateColorSet({ regular: primaryColor }) }
 			: {};
 		setExtensions((extension) => ({

src/boot/theme-provider.tsx

@@ -113,3 +113,5 @@ export type { BatchRequest, BatchResponse } from './types/network';
 export type { Action } from './types/integrations';
 
 export type { HistoryParams } from './types/misc';
+
+import './types/theme';

src/lib.ts

@@ -8,7 +8,7 @@
 import type { ComponentType } from 'react';
 import type React from 'react';
 
-import type { DefaultTheme } from 'styled-components';
+import type { Theme } from '@zextras/carbonio-design-system';
 
 export type CarbonioModule = {
 	commit: string;
@@ -36,7 +36,7 @@ export type BadgeInfo = {
 	icon?: string;
 	count?: number;
 	showCount?: boolean;
-	color?: keyof DefaultTheme['palette'];
+	color?: keyof Theme['palette'];
 };
 
 export type CarbonioView<P> = {

src/styled-components.d.ts

@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { CSSProperties } from 'react';
+
+import type { ThemeColorObj } from '@zextras/carbonio-design-system';
+
+declare module '@zextras/carbonio-design-system' {
+	interface Theme {
+		globalCursors: CSSProperties['cursor'][];
+	}
+
+	interface Palette {
+		shared: ThemeColorObj;
+		linked: ThemeColorObj;
+	}
+}

src/types/apps/index.ts

@@ -14,7 +14,6 @@
       "./src/i18next.d.ts",
       "./src/assets.d.ts",
       "./src/globals.d.ts",
-      "./src/styled-components.d.ts",
       "node"
     ]
   },