diff --git a/front/.eslintrc.json b/front/.eslintrc.json
index 9065389d..e7c4afae 100755
--- a/front/.eslintrc.json
+++ b/front/.eslintrc.json
@@ -3,7 +3,7 @@
"plugins": ["header"],
"settings": {
"next": {
- "rootDir": "packages/web/"
+ "rootDir": "apps/web/"
}
},
"rules": {
diff --git a/front/apps/mobile/package.json b/front/apps/mobile/package.json
index f05d8c2c..0d983abd 100644
--- a/front/apps/mobile/package.json
+++ b/front/apps/mobile/package.json
@@ -9,7 +9,6 @@
"web": "expo start --web"
},
"dependencies": {
- "@expo/html-elements": "^0.2.0",
"@kyoo/ui": "workspace:^",
"expo": "~46.0.16",
"expo-status-bar": "~1.4.0",
@@ -17,7 +16,7 @@
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-svg": "12.3.0",
- "react-native-web": "~0.18.7"
+ "yoshiki": "0.1.4"
},
"devDependencies": {
"@babel/core": "^7.19.6",
diff --git a/front/apps/web/package.json b/front/apps/web/package.json
index 3f19c569..c679252a 100644
--- a/front/apps/web/package.json
+++ b/front/apps/web/package.json
@@ -13,7 +13,6 @@
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
- "@expo/html-elements": "^0.2.0",
"@jellyfin/libass-wasm": "^4.1.1",
"@kyoo/ui": "workspace:^",
"@mui/icons-material": "^5.8.4",
@@ -30,8 +29,8 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-infinite-scroll-component": "^6.1.0",
- "react-native-web": "^0.18.9",
"superjson": "^1.9.1",
+ "yoshiki": "0.1.4",
"zod": "^3.18.0"
},
"devDependencies": {
diff --git a/front/packages/primitives/package.json b/front/packages/primitives/package.json
index 2970589c..1cf155fc 100644
--- a/front/packages/primitives/package.json
+++ b/front/packages/primitives/package.json
@@ -8,10 +8,9 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "@expo/html-elements": "*",
"react": "*",
"react-native": "*",
- "react-native-web": "*"
+ "yoshiki": "*"
},
"peerDependenciesMeta": {
"react-native": {
diff --git a/front/packages/youshiki/src/type.ts b/front/packages/primitives/src/div.tsx
similarity index 68%
rename from front/packages/youshiki/src/type.ts
rename to front/packages/primitives/src/div.tsx
index 1e5b4b33..158c6c1a 100644
--- a/front/packages/youshiki/src/type.ts
+++ b/front/packages/primitives/src/div.tsx
@@ -18,19 +18,15 @@
* along with Kyoo. If not, see .
*/
-export type Theme = {
- // TODO: remove this, just for test purpose
- spacing: string;
-};
+import { splitRender } from "yoshiki";
+import { View } from "react-native";
+import { ReactNode } from "react";
-export type YoushikiStyle =
- | Property
- | ((theme: Theme) => Property)
- | Breakpoints;
-
-export type Breakpoints = {
- sm?: Property;
- md?: Property;
- lg?: Property;
- xl?: Property;
-};
+export const Div = splitRender(
+ function _DivWeb(props, ref) {
+ return ;
+ },
+ function _DivNat(props, ref) {
+ return ;
+ },
+);
diff --git a/front/packages/primitives/src/text.tsx b/front/packages/primitives/src/text.tsx
new file mode 100644
index 00000000..1d2e1a80
--- /dev/null
+++ b/front/packages/primitives/src/text.tsx
@@ -0,0 +1,90 @@
+/*
+ * Kyoo - A portable and vast media library solution.
+ * Copyright (c) Kyoo.
+ *
+ * See AUTHORS.md and LICENSE file in the project root for full license information.
+ *
+ * Kyoo is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * any later version.
+ *
+ * Kyoo is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Kyoo. If not, see .
+ */
+
+import { ReactNode } from "react";
+import { Text, TextStyle } from "react-native";
+import { splitRender } from "yoshiki";
+import { em, useYoshiki } from "yoshiki/native";
+
+const headerStyles: Record<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", TextStyle> = {
+ h1: {
+ fontSize: em(2),
+ marginVertical: em(0.67),
+ fontWeight: "bold",
+ },
+ h2: {
+ fontSize: em(1.5),
+ marginVertical: em(0.83),
+ fontWeight: "bold",
+ },
+ h3: {
+ fontSize: em(1.17),
+ marginVertical: em(1),
+ fontWeight: "bold",
+ },
+ h4: {
+ fontSize: em(1),
+ marginVertical: em(1.33),
+ fontWeight: "bold",
+ },
+ h5: {
+ fontSize: em(0.83),
+ marginVertical: em(1.67),
+ fontWeight: "bold",
+ },
+ h6: {
+ fontSize: em(0.67),
+ marginVertical: em(2.33),
+ fontWeight: "bold",
+ },
+};
+
+const textGenerator = (webHeader?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6") =>
+ splitRender(
+ function _PWeb({ children, ...props }, ref) {
+ const T = webHeader ?? "p";
+ return (
+
+ {children}
+
+ );
+ },
+ function _PNative({ children, ...props }, ref) {
+ const { css } = useYoshiki();
+
+ return (
+
+ {children}
+
+ );
+ },
+ );
+
+export const H1 = textGenerator("h1");
+export const H2 = textGenerator("h2");
+export const H3 = textGenerator("h3");
+export const H4 = textGenerator("h4");
+export const H5 = textGenerator("h5");
+export const H6 = textGenerator("h6");
+export const P = textGenerator();
diff --git a/front/packages/ui/package.json b/front/packages/ui/package.json
index 2327c97f..0d30c1fc 100644
--- a/front/packages/ui/package.json
+++ b/front/packages/ui/package.json
@@ -12,18 +12,13 @@
"typescript": "^4.8.4"
},
"peerDependencies": {
- "@emotion/react": "*",
- "@expo/html-elements": "*",
"react": "*",
"react-native": "*",
- "react-native-web": "*"
+ "yoshiki": "*"
},
"peerDependenciesMeta": {
"react-native": {
"optional": true
- },
- "react-native-web": {
- "optional": true
}
}
}
diff --git a/front/packages/youshiki/examples/api.tsx b/front/packages/youshiki/examples/api.tsx
deleted file mode 100644
index 2a6593bb..00000000
--- a/front/packages/youshiki/examples/api.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * Kyoo - A portable and vast media library solution.
- * Copyright (c) Kyoo.
- *
- * See AUTHORS.md and LICENSE file in the project root for full license information.
- *
- * Kyoo is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * any later version.
- *
- * Kyoo is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with Kyoo. If not, see .
- */
-
-import { Button } from "react-native";
-
-/* import { css } from "youshiki/native"; */
-import { css } from "../src/native";
-
-export const ExampleButton = () => {
- return (
-