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 ( -