fix: use DS local fonts instead of downloading them from third-party …

…source * style: update carbonio configs package * fix: move out implementations from d.ts files * chore: ignore carbonio tgz packages * fix: us DS local fonts instead of downloading them from google refs: IRIS-3443 (#184)
zextras · Jan 27, 2023 · 4933726 · 4933726
1 parent e8bacf4
commit 4933726
Show file tree

Hide file tree

Showing 15 changed files with 181 additions and 196 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,4 +11,5 @@
 /coverage/cobertura-coverage.xml
 /.vscode/
 /.idea/
-.dev.json
+.dev.json
+zextras-carbonio-*.tgz
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
 		"postpublish": "pinst --enable && rm -rf lib",
 		"type-check": "tsc --noEmit",
 		"type-check:watch": "npm run type-check -- --watch",
-		"lint": "eslint --ext .js,.jsx,.ts,.tsx --resolve-plugins-relative-to node_modules/@zextras/zapp-config src",
+		"lint": "eslint --ext .js,.jsx,.ts,.tsx --resolve-plugins-relative-to node_modules/@zextras/carbonio-ui-configs src",
 		"build": "sdk build",
 		"deploy": "sdk deploy",
 		"start": "sdk watch",
@@ -97,7 +97,6 @@
 		"webpack-merge": "5.8.0"
 	},
 	"dependencies": {
-		"@fontsource/roboto": "^4.5.7",
 		"@sentry/browser": "^6.17.7",
 		"@tinymce/tinymce-react": "^3.13.0",
 		"@zextras/carbonio-design-system": "^1.0.1",

diff --git a/src/boot/theme-provider.tsx b/src/boot/theme-provider.tsx
@@ -145,7 +145,7 @@ export const ThemeProvider: FC = ({ children }) => {
 	}, [localStorageSettings]);
 
 	return (
-		<UIThemeProvider extension={aggregatedExtensions}>
+		<UIThemeProvider extension={aggregatedExtensions} loadDefaultFont>
 			<ThemeCallbacksContext.Provider value={{ addExtension, setDarkReaderState }}>
 				<GlobalStyle baseFontSize={baseFontSize} />
 				{children}

diff --git a/src/custom-hooks/useDarkReaderResultValue.ts b/src/custom-hooks/useDarkReaderResultValue.ts
@@ -8,12 +8,23 @@ import { useMemo } from 'react';
 import { find, size } from 'lodash';
 import { useUserSettings } from '../store/account';
 import { useLoginConfigStore } from '../store/login/store';
-import {
-	DarkReaderPropValues,
-	isZappDarkreaderModeZimletProp,
-	ZappDarkreaderModeZimletProp,
-	ZimletProp
-} from '../../types';
+import type { DarkReaderPropValues, ZappDarkreaderModeZimletProp, ZimletProp } from '../../types';
+import { DARK_READER_PROP_KEY, DARK_READER_VALUES, SHELL_APP_ID } from '../constants';
+
+export function isZappDarkreaderModeZimletProp(
+	prop: ZimletProp
+): prop is ZappDarkreaderModeZimletProp {
+	return prop.name === DARK_READER_PROP_KEY && prop.zimlet === SHELL_APP_ID;
+}
+
+export function isDarkReaderPropValues(
+	maybeDarkReaderPropValue: unknown
+): maybeDarkReaderPropValue is DarkReaderPropValues {
+	return (
+		typeof maybeDarkReaderPropValue === 'string' &&
+		DARK_READER_VALUES.includes(maybeDarkReaderPropValue as DarkReaderPropValues)
+	);
+}
 
 // return the final calculated value between ZappDarkreaderModeZimletProp value and carbonioWebUiDarkMode config
 export function useDarkReaderResultValue(): undefined | DarkReaderPropValues {

diff --git a/src/index.template.html b/src/index.template.html
@@ -16,12 +16,6 @@
 	<meta http-equiv="Cache-Control" content="no-cache" />
 	<meta http-equiv="Pragma" content="no-cache" />
 	<meta http-equiv="Expires" content="0" />
-	<!-- connect to domain of font files -->
-	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
-	<!-- optionally increase loading priority -->
-	<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto">
-	<!-- async CSS -->
-	<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css?family=Roboto">
 </head>
 
 <body>

diff --git a/src/index.tsx b/src/index.tsx
@@ -10,10 +10,6 @@ import './index.css';
 import React, { lazy, Suspense } from 'react';
 import { render } from 'react-dom';
 import LoadingView from './boot/splash';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
 
 window.addEventListener('contextmenu', (ev) => {
 	if (

diff --git a/src/reporting/store.ts b/src/reporting/store.ts
@@ -7,7 +7,8 @@
 import create, { StoreApi, UseBoundStore } from 'zustand';
 import { BrowserClient, Hub } from '@sentry/browser';
 import { reduce } from 'lodash';
-import { CarbonioModule, SHELL_APP_ID } from '../../types';
+import type { CarbonioModule } from '../../types';
+import { SHELL_APP_ID } from '../constants';
 
 type ReporterState = {
 	clients: Record<string, Hub>;

diff --git a/src/settings/components/general-settings/dark-theme-settings-section.tsx b/src/settings/components/general-settings/dark-theme-settings-section.tsx
@@ -7,11 +7,14 @@
 import { Select, SelectItem, SingleSelectionOnChange, Text } from '@zextras/carbonio-design-system';
 import { find } from 'lodash';
 import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { AddMod, DarkReaderPropValues, isDarkReaderPropValues, RemoveMod } from '../../../../types';
+import type { AddMod, DarkReaderPropValues, RemoveMod } from '../../../../types';
 import { ThemeCallbacksContext } from '../../../boot/theme-provider';
 import { DARK_READER_PROP_KEY, SHELL_APP_ID } from '../../../constants';
 import { getT } from '../../../store/i18n';
-import { useDarkReaderResultValue } from '../../../custom-hooks/useDarkReaderResultValue';
+import {
+	isDarkReaderPropValues,
+	useDarkReaderResultValue
+} from '../../../custom-hooks/useDarkReaderResultValue';
 
 const DarkThemeSettingSection: FC<{
 	addMod: AddMod;

diff --git a/src/shell/shell-view.tsx b/src/shell/shell-view.tsx
@@ -6,15 +6,9 @@
 
 import { Responsive, Row } from '@zextras/carbonio-design-system';
 import { PreviewManager } from '@zextras/carbonio-ui-preview';
-import { find, size } from 'lodash';
-import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
+import React, { FC, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-	AppRoute,
-	isZappDarkreaderModeZimletProp,
-	ZappDarkreaderModeZimletProp,
-	ZimletProp
-} from '../../types';
+import type { AppRoute } from '../../types';
 import { ThemeCallbacksContext } from '../boot/theme-provider';
 import { IS_STANDALONE } from '../constants';
 import { useCurrentRoute } from '../history/hooks';

diff --git a/src/store/integrations/store.ts b/src/store/integrations/store.ts
@@ -8,8 +8,9 @@ import produce from 'immer';
 import create from 'zustand';
 import { forEach, omit, reduce } from 'lodash';
 import { ComponentType } from 'react';
-import { ActionFactory, AnyFunction, IntegrationsState, SHELL_APP_ID } from '../../../types';
+import type { ActionFactory, AnyFunction, IntegrationsState } from '../../../types';
 import Composer from './composer';
+import { SHELL_APP_ID } from '../../constants';
 
 export const useIntegrationsStore = create<IntegrationsState>((set) => ({
 	actions: {},

diff --git a/src/utility-bar/bar.tsx b/src/utility-bar/bar.tsx
@@ -12,14 +12,15 @@ import {
 } from '@zextras/carbonio-design-system';
 import { map, noop } from 'lodash';
 import React, { FC, useCallback, useMemo } from 'react';
-import { SHELL_APP_ID, UtilityView } from '../../types';
+import type { UtilityView } from '../../types';
 import { noOp } from '../network/fetch';
 import { logout } from '../network/logout';
 import { useUserAccount } from '../store/account';
 import { addBoard } from '../store/boards';
 import { getT } from '../store/i18n';
 import { useUtilityBarStore } from './store';
 import { useUtilityViews } from './utils';
+import { SHELL_APP_ID } from '../constants';
 
 const UtilityBarItem: FC<{ view: UtilityView }> = ({ view }) => {
 	const { mode, setMode, current, setCurrent } = useUtilityBarStore();

diff --git a/types/account/index.d.ts b/types/account/index.d.ts
@@ -4,8 +4,9 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { DARK_READER_PROP_KEY, SHELL_APP_ID } from '../../src/constants';
-import { DarkReaderPropValues } from '../misc';
+import type { DarkReaderPropValues } from '../misc';
+import { DARK_READER_PROP_KEY } from '../../src/constants';
+import type { SHELL_APP_ID } from '../exports';
 
 export interface ZimletProp {
 	name: string;
@@ -19,12 +20,6 @@ export interface ZappDarkreaderModeZimletProp extends ZimletProp {
 	_content: DarkReaderPropValues;
 }
 
-export function isZappDarkreaderModeZimletProp(
-	prop: ZimletProp
-): ZimletProp is ZappDarkreaderModeZimletProp {
-	return prop.name === DARK_READER_PROP_KEY && prop.zimlet === SHELL_APP_ID;
-}
-
 export type SoapFetch = <Request, Response>(
 	api: string,
 	body: Request,