Fix some deprecation warnings

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",

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",

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",

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",

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,
 				},

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

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,
 			)}

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;
 	}
 }
 

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,

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 })}
 		>