From e7c878b30aadb7515b57d4d90d104da92e39fd0a Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Thu, 9 Nov 2023 20:37:12 +0100
Subject: [PATCH] Fix some deprecation warnings

---
 front/apps/mobile/package.json                |  1 +
 front/apps/web/package.json                   |  1 +
 front/packages/models/package.json            |  1 +
 front/packages/primitives/package.json        |  1 +
 front/packages/primitives/src/links.tsx       | 14 +++++++----
 front/packages/primitives/src/menu.tsx        |  2 +-
 front/packages/primitives/src/slider.tsx      |  4 ++--
 front/packages/primitives/src/types.d.ts      | 24 +++++++++++++++++++
 .../ui/src/player/components/hover.tsx        |  4 ++--
 front/packages/ui/src/player/video.tsx        |  3 ++-
 10 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json
index 612cf045..17fc4315 100644
--- a/front/apps/mobile/package.json
+++ b/front/apps/mobile/package.json
@@ -2,6 +2,7 @@
 	"name": "mobile",
 	"version": "1.0.0",
 	"main": "index.tsx",
+	"sideEffects": false,
 	"scripts": {
 		"dev": "expo start",
 		"android": "expo start --android",
diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index a3cb78bb..b7395772 100644
--- a/front/apps/web/package.json
+++ b/front/apps/web/package.json
@@ -2,6 +2,7 @@
 	"name": "web",
 	"version": "0.1.0",
 	"private": true,
+	"sideEffects": ["./src/polyfill.ts"],
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
diff --git a/front/packages/models/package.json b/front/packages/models/package.json
index 0d8f4407..3859eadc 100644
--- a/front/packages/models/package.json
+++ b/front/packages/models/package.json
@@ -2,6 +2,7 @@
 	"name": "@kyoo/models",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
+	"sideEffects": false,
 	"packageManager": "yarn@3.2.4",
 	"devDependencies": {
 		"@types/react": "18.2.34",
diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json
index cfd56ea9..7123bf81 100644
--- a/front/packages/primitives/package.json
+++ b/front/packages/primitives/package.json
@@ -2,6 +2,7 @@
 	"name": "@kyoo/primitives",
 	"main": "src/index.ts",
 	"types": "src/index.ts",
+	"sideEffects": false,
 	"packageManager": "yarn@3.2.4",
 	"devDependencies": {
 		"@gorhom/portal": "^1.0.14",
diff --git a/front/packages/primitives/src/links.tsx b/front/packages/primitives/src/links.tsx
index f4c6a619..5b474556 100644
--- a/front/packages/primitives/src/links.tsx
+++ b/front/packages/primitives/src/links.tsx
@@ -53,12 +53,16 @@ export const A = ({
 					: undefined
 			}
 			textProps={css(
+				[
+					{
+						fontFamily: theme.font.normal,
+						color: theme.link,
+					},
+					{
+						userSelect: "text",
+					} as any,
+				],
 				{
-					fontFamily: theme.font.normal,
-					color: theme.link,
-				},
-				{
-					selectable: true,
 					hrefAttrs: { target },
 					...props,
 				},
diff --git a/front/packages/primitives/src/menu.tsx b/front/packages/primitives/src/menu.tsx
index 5dbe121c..909ccee5 100644
--- a/front/packages/primitives/src/menu.tsx
+++ b/front/packages/primitives/src/menu.tsx
@@ -73,7 +73,7 @@ const Menu = <AsProps,>({
 								<MenuContext.Provider value={setOpen}>
 									<Pressable
 										onPress={() => setOpen(false)}
-										focusable={false}
+										tabIndex={-1}
 										{...css({ ...StyleSheet.absoluteFillObject, flexGrow: 1, bg: "transparent" })}
 									/>
 									<View
diff --git a/front/packages/primitives/src/slider.tsx b/front/packages/primitives/src/slider.tsx
index 69373846..571c9935 100644
--- a/front/packages/primitives/src/slider.tsx
+++ b/front/packages/primitives/src/slider.tsx
@@ -69,7 +69,7 @@ export const Slider = ({
 			onMouseEnter={() => setHover(true)}
 			// @ts-ignore Web only
 			onMouseLeave={() => setHover(false)}
-			focusable
+			tabIndex={0}
 			onFocus={() => setFocus(true)}
 			onBlur={() => setFocus(false)}
 			onStartShouldSetResponder={() => true}
@@ -107,7 +107,7 @@ export const Slider = ({
 					paddingVertical: ts(1),
 					// @ts-ignore Web only
 					cursor: "pointer",
-					focus: focusReset,
+					...focusReset,
 				},
 				props,
 			)}
diff --git a/front/packages/primitives/src/types.d.ts b/front/packages/primitives/src/types.d.ts
index c6fb2853..6e419664 100644
--- a/front/packages/primitives/src/types.d.ts
+++ b/front/packages/primitives/src/types.d.ts
@@ -22,8 +22,32 @@ import React from "react";
 import "react-native";
 
 declare module "react-native" {
+	interface PressableStateCallbackType {
+		hovered?: boolean;
+		focused?: boolean;
+	}
+	interface AccessibilityProps {
+		tabIndex?: number;
+	}
+	interface ViewStyle {
+		transitionProperty?: string;
+		transitionDuration?: string;
+	}
+	interface TextProps {
+		href?: string;
+		hrefAttrs?: {
+			rel?: "noreferrer";
+			target?: string;
+		};
+	}
 	interface ViewProps {
 		dataSet?: Record<string, string>;
+		href?: string;
+		hrefAttrs?: {
+			rel: "noreferrer";
+			target?: "_blank";
+		};
+		onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
 	}
 }
 
diff --git a/front/packages/ui/src/player/components/hover.tsx b/front/packages/ui/src/player/components/hover.tsx
index 4ffea15f..9fe8fb79 100644
--- a/front/packages/ui/src/player/components/hover.tsx
+++ b/front/packages/ui/src/player/components/hover.tsx
@@ -85,7 +85,7 @@ export const Hover = ({
 				<>
 					<Back isLoading={isLoading} name={showName} href={href} {...css(opacity, props)} />
 					<Pressable
-						focusable={false}
+						tabIndex={-1}
 						onPointerDown={onPointerDown}
 						onPress={Platform.OS !== "web" ? () => onPointerDown?.({} as any) : undefined}
 						{...css(
@@ -247,9 +247,9 @@ export const LoadingIndicator = () => {
 
 	return (
 		<View
-			pointerEvents="none"
 			{...css({
 				position: "absolute",
+				pointerEvents: "none",
 				top: 0,
 				bottom: 0,
 				left: 0,
diff --git a/front/packages/ui/src/player/video.tsx b/front/packages/ui/src/player/video.tsx
index 9b0df0b5..2c449d30 100644
--- a/front/packages/ui/src/player/video.tsx
+++ b/front/packages/ui/src/player/video.tsx
@@ -43,6 +43,7 @@ import { useTranslation } from "react-i18next";
 import { PlayMode, playModeAtom, subtitleAtom } from "./state";
 import uuid from "react-native-uuid";
 import { Pressable } from "react-native";
+import "@kyoo/primitives/src/types.d.ts";
 import { useYoshiki } from "yoshiki/native";
 
 const MimeTypes: Map<string, string> = new Map([
@@ -77,7 +78,7 @@ const Video = forwardRef<NativeVideo, VideoProps>(function Video(
 
 	return (
 		<Pressable
-			focusable={false}
+			tabIndex={-1}
 			onPress={() => onPointerDown?.({ nativeEvent: { pointerType: "pointer" } } as any)}
 			{...css({ flexGrow: 1, flexShrink: 1 })}
 		>