From 5ef40f416b106fc406b3bfab5cc8d4a661978d61 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Fri, 1 Dec 2023 23:28:28 +0100
Subject: [PATCH] Fix yoshiki insert bug in input

---
 front/apps/mobile/package.json          |  2 +-
 front/apps/web/package.json             |  2 +-
 front/packages/primitives/src/input.tsx | 57 +++++++++++++------------
 front/packages/ui/src/navbar/index.tsx  |  4 +-
 front/yarn.lock                         | 12 +++---
 5 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json
index ae6e5efc4a..2d846ddd2f 100644
--- a/front/apps/mobile/package.json
+++ b/front/apps/mobile/package.json
@@ -53,7 +53,7 @@
 		"react-native-svg": "13.9.0",
 		"react-native-uuid": "^2.0.1",
 		"react-native-video": "^6.0.0-beta.0",
-		"yoshiki": "1.2.12"
+		"yoshiki": "1.2.14"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.23.5",
diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index 5e06ce41f3..2fc2195160 100644
--- a/front/apps/web/package.json
+++ b/front/apps/web/package.json
@@ -43,7 +43,7 @@
 		"srt-webvtt": "^2.0.0",
 		"superjson": "^2.2.1",
 		"sweetalert2": "^11.10.1",
-		"yoshiki": "1.2.12",
+		"yoshiki": "1.2.14",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
diff --git a/front/packages/primitives/src/input.tsx b/front/packages/primitives/src/input.tsx
index 9ebf6ae554..595bf24713 100644
--- a/front/packages/primitives/src/input.tsx
+++ b/front/packages/primitives/src/input.tsx
@@ -19,54 +19,57 @@
  */
 
 import { forwardRef, ReactNode, useState } from "react";
-import { TextInput, TextInputProps, View } from "react-native";
+import { TextInput, TextInputProps, View, ViewStyle } from "react-native";
 import { px, Theme, useYoshiki } from "yoshiki/native";
 import { focusReset, ts } from "./utils";
+import { YoshikiEnhanced } from "./image/base-image";
 
 export const Input = forwardRef<
 	TextInput,
 	{
 		variant?: "small" | "big";
 		right?: ReactNode;
+		containerStyle?: YoshikiEnhanced<ViewStyle>;
 	} & TextInputProps
->(function Input({ placeholderTextColor, variant = "small", right, ...props }, ref) {
-	const { css, theme } = useYoshiki();
+>(function Input(
+	{ placeholderTextColor, variant = "small", right, containerStyle, ...props },
+	ref,
+) {
 	const [focused, setFocused] = useState(false);
+	const { css, theme } = useYoshiki();
 
 	return (
 		<View
-			{...css(
-				[
-					{
-						borderColor: (theme) => theme.accent,
-						borderRadius: ts(1),
-						borderWidth: px(1),
-						borderStyle: "solid",
-						padding: ts(0.5),
-						flexDirection: "row",
-						alignContent: "center",
-						alignItems: "center",
-					},
-					variant === "big" && {
-						borderRadius: ts(4),
-						p: ts(1),
-					},
-					focused && {
-						borderWidth: px(2),
-					},
-				],
-				props,
-			)}
+			{...css([
+				{
+					borderColor: (theme) => theme.accent,
+					borderRadius: ts(1),
+					borderWidth: px(1),
+					borderStyle: "solid",
+					padding: ts(0.5),
+					flexDirection: "row",
+					alignContent: "center",
+					alignItems: "center",
+				},
+				variant === "big" && {
+					borderRadius: ts(4),
+					p: ts(1),
+				},
+				focused && {
+					borderWidth: px(2),
+				},
+				containerStyle,
+			])}
 		>
 			<TextInput
 				ref={ref}
-				placeholderTextColor={placeholderTextColor ?? theme.colors.white}
+				placeholderTextColor={placeholderTextColor ?? theme.paragraph}
 				onFocus={() => setFocused(true)}
 				onBlur={() => setFocused(false)}
 				{...css(
 					{
 						flexGrow: 1,
-						color: (theme: Theme) => theme.colors.white,
+						color: (theme: Theme) => theme.paragraph,
 						borderWidth: 0,
 						...focusReset,
 					},
diff --git a/front/packages/ui/src/navbar/index.tsx b/front/packages/ui/src/navbar/index.tsx
index 66edd5d71b..ceeaf59a7e 100644
--- a/front/packages/ui/src/navbar/index.tsx
+++ b/front/packages/ui/src/navbar/index.tsx
@@ -87,8 +87,10 @@ const SearchBar = forwardRef<TextInput, Stylable>(function SearchBar(props, ref)
 				setQuery(q);
 			}}
 			placeholder={t("navbar.search")}
+			placeholderTextColor={theme.colors.white}
+			containerStyle={{ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.colors.white }}
 			{...tooltip(t("navbar.search"))}
-			{...css({ height: ts(4), flexShrink: 1, borderColor: (theme) => theme.colors.white }, props)}
+			{...props}
 		/>
 	);
 });
diff --git a/front/yarn.lock b/front/yarn.lock
index fe57b037fd..06625ed7ce 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -11283,7 +11283,7 @@ __metadata:
     react-native-uuid: ^2.0.1
     react-native-video: ^6.0.0-beta.0
     typescript: ^5.3.2
-    yoshiki: 1.2.12
+    yoshiki: 1.2.14
   languageName: unknown
   linkType: soft
 
@@ -15185,7 +15185,7 @@ __metadata:
     sweetalert2: ^11.10.1
     typescript: ^5.3.2
     webpack: ^5.89.0
-    yoshiki: 1.2.12
+    yoshiki: 1.2.14
     zod: ^3.22.4
   languageName: unknown
   linkType: soft
@@ -15612,9 +15612,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yoshiki@npm:1.2.12":
-  version: 1.2.12
-  resolution: "yoshiki@npm:1.2.12"
+"yoshiki@npm:1.2.14":
+  version: 1.2.14
+  resolution: "yoshiki@npm:1.2.14"
   dependencies:
     "@types/inline-style-prefixer": ^5.0.0
     "@types/node": 18.x.x
@@ -15629,7 +15629,7 @@ __metadata:
       optional: true
     react-native-web:
       optional: true
-  checksum: e5e59d8fa3df0039a19641f3d476cc7315cef31d0eb1a8a15fcff56f0a74f870b7d5d78b471b02a32dfab0582a02d33c6aa805a69035fa17ed621ecbe0f0c285
+  checksum: 0f7c6d8195f400492795576d84fbc4a503b59fe124b1dfc67664f6f41659e47ebc30c4dd4c3f74d4ce70dfa955c7deceaf2af0a27a383ed54fb1d7088e50f010
   languageName: node
   linkType: hard