feat: allow the user to resize and move the board

.gitignore

@@ -15,3 +15,4 @@
 zextras-carbonio-*.tgz
 shell.iml
 .env
+/coverage

__mocks__/zustand/index.ts

@@ -17,7 +17,9 @@ export const create =
 	(createState: StateCreator<S>): UseBoundStore<StoreApi<S>> => {
 		const store = actualCreate(createState);
 		const initialState = store.getState();
-		storeResetFns.add(() => store.setState(initialState, true));
+		storeResetFns.add(() => {
+			store.setState(initialState, true);
+		});
 		return store;
 	};
 

package.json

@@ -112,7 +112,7 @@
 		"react-widgets-moment": "^4.0.30",
 		"tinymce": "^6.4.0",
 		"ua-parser-js": "^1.0.34",
-		"zustand": "^4.3.6"
+		"zustand": "^4.3.8"
 	},
 	"peerDependencies": {
 		"@reduxjs/toolkit": "^1 >=1.9",

src/boot/app/app-loader-functions.ts

@@ -31,7 +31,6 @@ import {
 	getUserRight,
 	getUserRights
 } from '../../store/account';
-import { useIsMobile, useLocalStorage } from '../../shell/hooks';
 import {
 	useAction,
 	useActions,
@@ -91,6 +90,8 @@ import {
 	useBoardHooks
 } from '../../store/boards';
 import { getNotificationManager } from '../../notification/NotificationManager';
+import { useLocalStorage } from '../../shell/hooks/useLocalStorage';
+import { useIsMobile } from '../../shell/hooks/useIsMobile';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const getAppFunctions = (pkg: CarbonioModule): Record<string, Function> => ({

src/boot/theme-provider.tsx

@@ -18,14 +18,14 @@ import {
 	ThemeProviderProps as UIThemeProviderProps
 } from '@zextras/carbonio-design-system';
 import { auto, disable, enable, setFetchMethod } from 'darkreader';
-import { reduce } from 'lodash';
-import { createGlobalStyle, DefaultTheme } from 'styled-components';
+import { map, reduce } from 'lodash';
+import { createGlobalStyle, css, DefaultTheme, SimpleInterpolation } from 'styled-components';
 import { DarkReaderPropValues, ThemeExtension } from '../../types';
 import { darkReaderDynamicThemeFixes, LOCAL_STORAGE_SETTINGS_KEY } from '../constants';
-import { useLocalStorage } from '../shell/hooks';
 import { ScalingSettings } from '../../types/settings';
 import { getAutoScalingFontSize } from '../settings/components/utils';
 import { useGetPrimaryColor } from './use-get-primary-color';
+import { useLocalStorage } from '../shell/hooks/useLocalStorage';
 
 setFetchMethod(window.fetch);
 
@@ -81,6 +81,18 @@ const iconExtension: ThemeExtension = (theme) => ({
 	}
 });
 
+const globalCursorsExtension: ThemeExtension = (theme) => ({
+	...theme,
+	globalCursors: [
+		...(theme.globalCursors || []),
+		'ns-resize',
+		'ew-resize',
+		'nesw-resize',
+		'nwse-resize',
+		'move'
+	]
+});
+
 interface GlobalStyledProps {
 	baseFontSize: number;
 }
@@ -89,6 +101,18 @@ const GlobalStyle = createGlobalStyle<GlobalStyledProps>`
   html {
     font-size: ${({ baseFontSize }): string => `${baseFontSize}%`};
   }
+  ${({ theme }): SimpleInterpolation =>
+		map(
+			theme.globalCursors,
+			(cursor) => css`
+				.global-cursor-${cursor} * {
+					cursor: ${cursor} !important;
+				}
+			`
+		)}
+  .no-active-background:active {
+	  background-color: inherit;
+  }
 `;
 
 interface ThemeProviderProps {
@@ -112,7 +136,8 @@ export const ThemeProvider = ({ children }: ThemeProviderProps): JSX.Element =>
 			palette: paletteExtension({
 				palette: customThemePalette
 			}),
-			icons: iconExtension
+			icons: iconExtension,
+			globalCursors: globalCursorsExtension
 		}));
 	}, [primaryColor]);
 
@@ -172,9 +197,14 @@ export const ThemeProvider = ({ children }: ThemeProviderProps): JSX.Element =>
 		return getAutoScalingFontSize();
 	}, [localStorageSettings]);
 
+	const themeCallbacksContextValue = useMemo<ThemeCallbacks>(
+		() => ({ addExtension, setDarkReaderState }),
+		[addExtension]
+	);
+
 	return (
 		<UIThemeProvider extension={aggregatedExtensions}>
-			<ThemeCallbacksContext.Provider value={{ addExtension, setDarkReaderState }}>
+			<ThemeCallbacksContext.Provider value={themeCallbacksContextValue}>
 				<GlobalStyle baseFontSize={baseFontSize} />
 				{children}
 			</ThemeCallbacksContext.Provider>

src/boot/use-get-primary-color.tsx

@@ -6,10 +6,10 @@
 import { useTheme } from '@zextras/carbonio-design-system';
 import { useEffect, useMemo } from 'react';
 import { size } from 'lodash';
-import { useLocalStorage } from '../shell/hooks';
 import { LOCAL_STORAGE_LAST_PRIMARY_KEY } from '../constants';
 import { useLoginConfigStore } from '../store/login/store';
 import { useDarkMode } from '../dark-mode/use-dark-mode';
+import { useLocalStorage } from '../shell/hooks/useLocalStorage';
 
 export function useGetPrimaryColor(): string | undefined {
 	const [localStorageLastPrimary, setLocalStorageLastPrimary] = useLocalStorage<

src/constants/index.ts

@@ -107,6 +107,7 @@ export const FOLDER_VIEW = {
 export const LOCAL_STORAGE_SETTINGS_KEY = 'settings';
 export const LOCAL_STORAGE_LAST_PRIMARY_KEY = 'config';
 export const LOCAL_STORAGE_SEARCH_KEY = 'search_suggestions';
+export const LOCAL_STORAGE_BOARD_SIZE = 'board_size';
 export const SCALING_OPTIONS = [
 	{ value: 75, label: 'xs' },
 	{ value: 87.5, label: 's' },
@@ -132,3 +133,13 @@ export enum ResultLabelType {
 	WARNING = 'warning',
 	ERROR = 'error'
 }
+
+export const HEADER_BAR_HEIGHT = '3.75rem';
+export const PRIMARY_BAR_WIDTH = '3.0625rem';
+export const BOARD_HEADER_HEIGHT = '3rem';
+export const BOARD_TAB_WIDTH = 'calc(3rem + 15ch)';
+export const BOARD_CONTAINER_ZINDEX = 10;
+export const BOARD_MIN_VISIBILITY = {
+	top: 50,
+	left: 30
+};

src/jest-env-setup.ts

@@ -49,14 +49,17 @@ beforeEach(() => {
 
 	Object.defineProperty(window, 'ResizeObserver', {
 		writable: true,
-		value: function ResizeObserverMock(callback: ResizeObserverCallback): ResizeObserver {
+		value: function ResizeObserverMock(): ResizeObserver {
 			return {
 				observe: jest.fn(),
 				unobserve: jest.fn(),
 				disconnect: jest.fn()
 			};
 		}
 	});
+
+	// cleanup local storage
+	window.localStorage.clear();
 });
 
 beforeAll(() => {

src/search/search-bar.tsx

@@ -17,12 +17,12 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 're
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 import { LOCAL_STORAGE_SEARCH_KEY, SEARCH_APP_ID } from '../constants';
-import { useLocalStorage } from '../shell/hooks';
 
 import { QueryChip, QueryItem } from '../../types';
 import { getT } from '../store/i18n';
 import { ModuleSelector } from './module-selector';
 import { useSearchStore } from './search-store';
+import { useLocalStorage } from '../shell/hooks/useLocalStorage';
 
 const OutlinedIconButton = styled(IconButton)`
 	border: 0.0625rem solid

src/settings/general-settings.tsx

@@ -19,14 +19,14 @@ import UserQuota from './components/general-settings/user-quota';
 import SettingsHeader from './components/settings-header';
 import LanguageAndTimeZoneSettings from './language-and-timezone-settings';
 import SearchSettingsView from './search-settings-view';
-import { useLocalStorage } from '../shell/hooks';
 import {
 	ScalingSettingSection,
 	ScalingSettingSectionRef
 } from './components/general-settings/scaling-setting-section';
 import DarkThemeSettingSection from './components/general-settings/dark-theme-settings-section';
 import { LOCAL_STORAGE_SETTINGS_KEY } from '../constants';
 import { ScalingSettings } from '../../types/settings';
+import { useLocalStorage } from '../shell/hooks/useLocalStorage';
 
 const GeneralSettings: FC = () => {
 	const [mods, setMods] = useState<Mods>({});