wip

front/.yarnrc.yml

@@ -1,22 +1,24 @@
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.4.cjs
-
 packageExtensions:
   "@expo/cli@*":
     dependencies:
       expo-modules-autolinking: "*"
-  "expo-asset@*":
-    dependencies:
-      expo: "*"
-  "babel-preset-expo@*":
+  babel-preset-expo@*:
     dependencies:
       "@babel/core": "*"
-  "react-native-codegen@*":
+  expo-asset@*:
+    dependencies:
+      expo: "*"
+  react-native-codegen@*:
     peerDependenciesMeta:
       "@babel/preset-env":
         optional: true
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

front/Dockerfile

@@ -1,4 +1,5 @@
 FROM node:16-alpine AS builder
+RUN apk add git bash
 WORKDIR /app
 COPY .yarn ./.yarn
 COPY .yarnrc.yml ./

front/Dockerfile.dev

@@ -1,4 +1,5 @@
 FROM node:16-alpine AS builder
+RUN apk add git bash
 WORKDIR /app
 COPY .yarn ./.yarn
 COPY .yarnrc.yml ./

front/apps/mobile/package.json

@@ -10,19 +10,19 @@
 	},
 	"dependencies": {
 		"@kyoo/ui": "workspace:^",
-		"expo": "~46.0.16",
-		"expo-status-bar": "~1.4.0",
-		"react": "18.0.0",
-		"react-dom": "18.0.0",
-		"react-native": "0.69.6",
-		"react-native-svg": "12.3.0",
-		"yoshiki": "0.1.4"
+		"expo": "~46.0.17",
+		"expo-status-bar": "~1.4.2",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-native": "0.69.7",
+		"react-native-svg": "12.4.4",
+		"yoshiki": "0.2.4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.19.6",
-		"@types/react": "~18.0.14",
-		"@types/react-native": "~0.69.1",
-		"typescript": "~4.3.5"
+		"@types/react": "~18.0.25",
+		"@types/react-native": "~0.69.15",
+		"typescript": "~4.9.3"
 	},
 	"private": true
 }

front/apps/mobile/src/app.tsx

@@ -21,10 +21,12 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 import { registerRootComponent } from "expo";
+import { Navbar } from "@kyoo/ui";
 
 function App() {
 	return (
 		<View style={styles.container}>
+			<Navbar />
 			<Text>Open up App.tsx to start working on your app!</Text>
 			<StatusBar style="auto" />
 		</View>

front/apps/web/babel.config.js

@@ -0,0 +1,26 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+module.exports = function (api) {
+	api.cache(true);
+	return {
+		presets: ["babel-preset-expo"],
+	};
+};

front/apps/web/next.config.js

@@ -20,7 +20,8 @@
 
 const path = require("path");
 const CopyPlugin = require("copy-webpack-plugin");
-const withTM = require("next-transpile-modules")(["@kyoo/ui", "@kyoo/primitives"]);
+const DefinePlugin = require("webpack").DefinePlugin;
+const withFont = require("next-fonts");
 
 const suboctopus = path.dirname(require.resolve("@jellyfin/libass-wasm"));
 
@@ -50,8 +51,15 @@ const nextConfig = {
 				...config.resolve.alias,
 				"react-native$": "react-native-web",
 			},
-			extensions: [".web.tsx", ".tsx", ...config.resolve.extensions],
+			extensions: [".web.ts", ".web.tsx", ".web.js", ".web.jsx", ...config.resolve.extensions],
 		};
+
+		if (!config.plugins) config.plugins = [];
+		config.plugins.push(
+			new DefinePlugin({
+				__DEV__: JSON.stringify(process.env.NODE_ENV !== "production"),
+			}),
+		);
 		return config;
 	},
 	async redirects() {
@@ -68,8 +76,22 @@ const nextConfig = {
 		defaultLocale: "en",
 	},
 	experimental: {
-		outputFileTracingRoot: path.join(__dirname, '../../'),
-	}
+		forceSwcTransforms: true,
+		outputFileTracingRoot: path.join(__dirname, "../../"),
+		transpilePackages: [
+			"@kyoo/ui",
+			"@kyoo/primitives",
+			"solito",
+			"react-native",
+			"react-native-web",
+			"yoshiki",
+			"@expo/vector-icons",
+			"@expo/html-elements",
+			"expo-font",
+			"expo-asset",
+			"expo-modules-core",
+		],
+	},
 };
 
 if (process.env.NODE_ENV !== "production") {
@@ -78,4 +100,4 @@ if (process.env.NODE_ENV !== "production") {
 	];
 }
 
-module.exports = withTM(nextConfig);
+module.exports = withFont(nextConfig);

front/apps/web/package.json

@@ -14,33 +14,37 @@
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
 		"@jellyfin/libass-wasm": "^4.1.1",
+		"@kyoo/primitives": "workspace:^",
 		"@kyoo/ui": "workspace:^",
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.8.7",
 		"@mui/system": "^5.10.10",
-		"@tanstack/react-query": "^4.13.4",
+		"@tanstack/react-query": "^4.18.0",
 		"clsx": "^1.2.1",
 		"csstype": "^3.1.1",
-		"hls.js": "^1.2.4",
-		"jotai": "^1.8.4",
-		"next": "12.2.2",
-		"next-translate": "^1.5.0",
-		"next-transpile-modules": "^9.1.0",
+		"hls.js": "^1.2.8",
+		"jotai": "^1.10.0",
+		"next": "13.0.5",
+		"next-fonts": "^1.5.1",
+		"next-translate": "^1.6.0",
+		"next-transpile-modules": "^10.0.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-infinite-scroll-component": "^6.1.0",
-		"superjson": "^1.9.1",
-		"yoshiki": "0.1.4",
-		"zod": "^3.18.0"
+		"react-native-web": "^0.18.10",
+		"solito": "^2.0.5",
+		"superjson": "^1.11.0",
+		"yoshiki": "0.2.4",
+		"zod": "^3.19.1"
 	},
 	"devDependencies": {
-		"@types/node": "18.0.3",
-		"@types/react": "18.0.15",
-		"@types/react-dom": "18.0.6",
+		"@types/node": "18.11.9",
+		"@types/react": "18.0.25",
+		"@types/react-dom": "18.0.9",
 		"copy-webpack-plugin": "^11.0.0",
-		"eslint": "^8.26.0",
-		"eslint-config-next": "12.2.2",
-		"typescript": "^4.8.4",
-		"webpack": "^5.74.0"
+		"eslint": "^8.28.0",
+		"eslint-config-next": "13.0.5",
+		"typescript": "^4.9.3",
+		"webpack": "^5.75.0"
 	}
 }

front/apps/web/src/pages/_app.tsx

@@ -20,17 +20,14 @@
 
 import React, { ReactNode, useState } from "react";
 import appWithI18n from "next-translate/appWithI18n";
-import { ThemeProvider, useTheme } from "@emotion/react";
+import { ThemeProvider, useTheme, useMobileHover } from "yoshiki/web";
 import { createTheme, ThemeProvider as MTheme } from "@mui/material";
-import NextApp, { AppContext } from "next/app";
-import type { AppProps } from "next/app";
+import NextApp, { AppContext, type AppProps } from "next/app";
 import { Hydrate, QueryClientProvider } from "@tanstack/react-query";
 import { createQueryClient, fetchQuery, QueryIdentifier, QueryPage } from "~/utils/query";
 import superjson from "superjson";
 import Head from "next/head";
-import { useMobileHover } from "~/utils/utils";
-import { catppuccin } from "~/utils/themes/catppuccin";
-import { selectMode } from "~/utils/themes/theme";
+import { selectMode, catppuccin } from "@kyoo/primitives";
 
 // Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details)
 if (typeof window === "undefined") {
@@ -42,12 +39,10 @@ const ThemeSelector = ({ children }: { children?: ReactNode | ReactNode[] }) =>
 	// TODO: Hande theme change.
 	return (
 		<MTheme theme={createTheme()}>
-			<ThemeProvider theme={selectMode(catppuccin, "light")}>
-				{children}
-			</ThemeProvider>
+			<ThemeProvider theme={selectMode(catppuccin, "light")}>{children}</ThemeProvider>
 		</MTheme>
-	)
-}
+	);
+};
 
 const GlobalCssTheme = () => {
 	const theme = useTheme();

front/apps/web/src/pages/_document.tsx

@@ -18,9 +18,9 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Html, Main, Head, NextScript } from "next/document";
-import { Children } from "react";
 import { AppRegistry } from "react-native";
+import { Html, Main, Head, NextScript, DocumentContext } from "next/document";
+import { createStyleRegistry, StyleRegistryProvider } from "yoshiki/web";
 
 export const style = `
 /**
@@ -80,14 +80,40 @@ const Document = () => {
 	);
 };
 
-// Enables SSR for react-native-web styles.
-Document.getInitialProps = async ({ renderPage }: any) => {
-	AppRegistry.registerComponent("Main", () => Main);
-	// @ts-ignore
-	const { getStyleElement } = AppRegistry.getApplication("Main");
-	const page = await renderPage();
-	const styles = [<style dangerouslySetInnerHTML={{ __html: style }} />, getStyleElement()];
-	return { ...page, styles: Children.toArray(styles) };
-};
+Document.getInitialProps = async (ctx: DocumentContext) => {
+	const renderPage = ctx.renderPage;
+	const registry = createStyleRegistry();
 
+	ctx.renderPage = () =>
+		renderPage({
+			enhanceApp: (App) => (props) => {
+				return (
+					<StyleRegistryProvider registry={registry}>
+						<App {...props} />
+					</StyleRegistryProvider>
+				);
+			},
+		});
+
+	const props = await ctx.defaultGetInitialProps(ctx);
+
+	AppRegistry.registerComponent("Main", () => Main);
+	// @ts-ignore React native web missing type.
+	const { getStyleElement } = AppRegistry.getApplication("Main");
+	const page = await ctx.renderPage();
+
+	return {
+		...props,
+		...page,
+		styles: (
+			<>
+				{props.styles}
+				{page.styles}
+				<style>{style}</style>
+				{getStyleElement()}
+				{registry.flushToComponent()}
+			</>
+		),
+	};
+};
 export default Document;

front/apps/web/src/pages/browse/index.tsx

@@ -34,9 +34,9 @@ import {
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
-import { MouseEvent, useState } from "react";
+import { useState } from "react";
 import { ErrorPage } from "~/components/errors";
-import { Navbar } from "~/components/navbar";
+import { Navbar } from "@kyoo/ui";
 import { Poster, Image } from "~/components/poster";
 import { ItemType, LibraryItem, LibraryItemP } from "~/models";
 import { getDisplayDate } from "~/models/utils";
@@ -433,7 +433,7 @@ BrowsePage.getLayout = (page) => {
 
 BrowsePage.getFetchUrls = ({ slug, sortBy }) => [
 	query(slug, sortBy?.split("-")[0] as SortBy, sortBy?.split("-")[1] as SortOrd),
-	Navbar.query(),
+	/* Navbar.query(), */
 ];
 
 export default withRoute(BrowsePage);

front/apps/web/src/utils/link.tsx

@@ -35,7 +35,7 @@ const NextButton = (
 	{ href, as, prefetch, locale, ...props }: ButtonLinkProps,
 	ref: Ref<ButtonRef>,
 ) => (
-	<NLink href={href} as={as} prefetch={prefetch} locale={locale} passHref>
+	<NLink href={href} as={as} prefetch={prefetch} locale={locale} legacyBehavior passHref>
 		<MButton ref={ref} {...props} />
 	</NLink>
 );
@@ -59,6 +59,7 @@ const NextLink = (
 		shallow={shallow}
 		replace={replace}
 		passHref
+		legacyBehavior
 	>
 		<MLink ref={ref} {...props} />
 	</NLink>

front/package.json

@@ -4,7 +4,7 @@
 	"scripts": {
 		"dev": "yarn workspaces foreach -pi run dev",
 		"web": "yarn workspace web dev",
-		"mobile": "yarn workspace mobile start",
+		"mobile": "yarn workspace mobile dev",
 		"build:web": "yarn workspace web build",
 		"lint": "eslint ."
 	},
@@ -23,13 +23,13 @@
 		"tsdoc": true
 	},
 	"devDependencies": {
-		"eslint": "8.19.0",
-		"eslint-config-next": "12.2.2",
+		"eslint": "8.28.0",
+		"eslint-config-next": "13.0.5",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-header": "^3.1.1",
-		"prettier": "^2.7.1",
-		"prettier-plugin-jsdoc": "^0.3.38",
-		"typescript": "4.7.4"
+		"prettier": "^2.8.0",
+		"prettier-plugin-jsdoc": "^0.4.2",
+		"typescript": "4.9.3"
 	},
 	"packageManager": "yarn@3.2.4"
 }

front/packages/primitives/package.json

@@ -1,11 +1,11 @@
 {
 	"name": "@kyoo/primitives",
-	"main": "src/index.tsx",
-	"types": "src/index.tsx",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"packageManager": "yarn@3.2.4",
 	"devDependencies": {
-		"@types/react": "^18.0.24",
-		"typescript": "^4.8.4"
+		"@types/react": "^18.0.25",
+		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
 		"react": "*",
@@ -13,11 +13,13 @@
 		"yoshiki": "*"
 	},
 	"peerDependenciesMeta": {
-		"react-native": {
-			"optional": true
-		},
 		"react-native-web": {
 			"optional": true
 		}
+	},
+	"dependencies": {
+		"@expo/html-elements": "^0.2.2",
+		"@expo/vector-icons": "AnonymusRaccoon/expo-vector-icons#no-prepare",
+		"solito": "^2.0.5"
 	}
 }

front/packages/primitives/src/icons.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+import MIcon from "@expo/vector-icons/MaterialIcons";
+import { ComponentProps } from "react";
+import { Pressable, useTheme } from "yoshiki/native";
+
+export type IconProps = {
+	icon: ComponentProps<typeof MIcon>["name"];
+	size?: number;
+	color?: string;
+};
+
+export const Icon = ({ icon, size, color }: IconProps) => {
+	return <MIcon name={icon} size={size ?? 24} color={color} />;
+};
+
+export const IconButton = ({
+	icon,
+	size,
+	color,
+	...props
+}: ComponentProps<typeof Pressable> & IconProps) => {
+	return (
+		<Pressable {...props}>
+			<Icon icon={icon} size={size} color={color} />
+		</Pressable>
+	);
+};

front/packages/primitives/src/index.ts

@@ -18,15 +18,14 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { splitRender } from "yoshiki";
-import { View } from "react-native";
-import { ReactNode } from "react";
+export { Header, Nav, Footer } from "@expo/html-elements";
+export * from "./text";
+export * from "./themes";
+export * from "./icons";
+export * from "./links";
 
-export const Div = splitRender<HTMLDivElement, View, { children: ReactNode }>(
-	function _DivWeb(props, ref) {
-		return <div ref={ref} {...props}></div>;
-	},
-	function _DivNat(props, ref) {
-		return <View ref={ref} {...props}></View>;
-	},
-);
+import { px } from "yoshiki/native";
+
+export const ts = (spacing: number) => {
+	return px(spacing * 8);
+};

front/packages/primitives/src/links.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+import { ReactNode } from "react";
+import { TextProps } from "react-native";
+import { TextLink } from "solito/link";
+import { useYoshiki } from "yoshiki/native";
+
+export const A = ({
+	href,
+	children,
+	...props
+}: TextProps & { href: string; children: ReactNode }) => {
+	const { css, theme } = useYoshiki();
+
+	return (
+		<TextLink
+			href={href}
+			textProps={css(
+				{
+					fontFamily: theme.fonts.paragraph,
+					color: theme.paragraph,
+				},
+				props,
+			)}
+		>
+			{children}
+		</TextLink>
+	);
+};

front/packages/primitives/src/text.tsx

@@ -18,73 +18,42 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { ReactNode } from "react";
-import { Text, TextStyle } from "react-native";
-import { splitRender } from "yoshiki";
-import { em, useYoshiki } from "yoshiki/native";
+import { ComponentType, ComponentProps } from "react";
+import { TextProps } from "react-native";
+import { useYoshiki } from "yoshiki/native";
+import {
+	H1 as EH1,
+	H2 as EH2,
+	H3 as EH3,
+	H4 as EH4,
+	H5 as EH5,
+	H6 as EH6,
+	P as EP,
+} from "@expo/html-elements";
 
-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 styleText = (Component: ComponentType<ComponentProps<typeof EP>>, heading?: boolean) => {
+	const Text = (props: ComponentProps<typeof EP>) => {
+		const { css, theme } = useYoshiki();
+
+		return (
+			<Component
+				{...css(
+					{
+						fontFamily: heading ? theme.fonts.heading : theme.fonts.paragraph,
+						color: heading ? theme.heading : theme.paragraph,
 					},
+					props as TextProps,
+				)}
+			/>
+		);
+	};
+	return Text;
 };
 
-const textGenerator = (webHeader?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6") =>
-	splitRender<HTMLParagraphElement, Text, { children: ReactNode }, "text">(
-		function _PWeb({ children, ...props }, ref) {
-			const T = webHeader ?? "p";
-			return (
-				<T ref={ref} {...props}>
-					{children}
-				</T>
-			);
-		},
-		function _PNative({ children, ...props }, ref) {
-			const { css } = useYoshiki();
-
-			return (
-				<Text
-					ref={ref}
-					accessibilityRole={webHeader ? "header" : "text"}
-					{...css(webHeader ? headerStyles[webHeader] : {}, props)}
-				>
-					{children}
-				</Text>
-			);
-		},
-	);
-
-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();
+export const H1 = styleText(EH1, true);
+export const H2 = styleText(EH2, true);
+export const H3 = styleText(EH3, true);
+export const H4 = styleText(EH4, true);
+export const H5 = styleText(EH5, true);
+export const H6 = styleText(EH6, true);
+export const P = styleText(EP);

front/packages/primitives/src/themes/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+export * from "./theme";
+export * from "./catppuccin";

front/packages/primitives/src/themes/theme.tsx

@@ -19,8 +19,8 @@
  */
 
 import { Property } from "csstype";
-import "@emotion/react";
-import { Theme, ThemeProvider, useTheme } from "@emotion/react";
+import "yoshiki";
+import { Theme, ThemeProvider, useTheme } from "yoshiki";
 
 type ThemeSettings = {
 	fonts: {
@@ -48,12 +48,12 @@ type Variant = {
 	subtext: Property.Color;
 };
 
-declare module "@emotion/react" {
+declare module "yoshiki" {
 	// TODO: Add specifics colors
 	export interface Theme extends ThemeSettings, Mode, Variant {}
 }
 
-export type { Theme } from "@emotion/react";
+export type { Theme } from "yoshiki";
 export type ThemeBuilder = ThemeSettings & {
 	light: Mode & { default: Variant };
 	dark: Mode & { default: Variant };

front/packages/ui/package.json

@@ -1,15 +1,15 @@
 {
 	"name": "@kyoo/ui",
-	"main": "src/index.tsx",
-	"types": "src/index.tsx",
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"packageManager": "yarn@3.2.4",
 	"dependencies": {
 		"@kyoo/primitives": "workspace:^",
-		"react-native-svg": "^13.5.0"
+		"react-native-svg": "^13.6.0"
 	},
 	"devDependencies": {
-		"@types/react": "^18.0.24",
-		"typescript": "^4.8.4"
+		"@types/react": "^18.0.25",
+		"typescript": "^4.9.3"
 	},
 	"peerDependencies": {
 		"react": "*",

front/packages/ui/src/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+export * from "./navbar";

front/packages/ui/src/index.tsx

@@ -1,4 +0,0 @@
-// leave this blank
-// don't re-export files from this workspace. it'll break next.js tree shaking
-// https://github.com/vercel/next.js/issues/12557
-export { Toto } from "./toto";

front/packages/ui/src/navbar.tsx

@@ -0,0 +1,124 @@
+/*
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+import useTranslation from "next-translate/useTranslation";
+/* import { Library, LibraryP, Page, Paged } from "~/models"; */
+/* import { QueryIdentifier, useFetch } from "~/utils/query"; */
+/* import { ErrorSnackbar } from "./errors"; */
+import { Stylable, useYoshiki } from "yoshiki/native";
+import { IconButton, Header, P, A, ts } from "@kyoo/primitives";
+import { View } from "react-native";
+
+const tooltip = (tooltip: string): object => ({});
+
+const KyooTitle = (props: Stylable) => {
+	const { css } = useYoshiki();
+	const { t } = useTranslation("common");
+
+	return (
+		<A
+			href="/"
+			{...tooltip(t("navbar.home"))}
+			{...css(
+				{
+					alignItems: "center",
+					display: "flex",
+				},
+				props,
+			)}
+		>
+			<img src={"/icon.svg"} width="24px" height="24px" alt="" />
+			<P
+				{...css({
+					marginLeft: ts(1),
+					marginRight: ts(2),
+					fontFamily: "monospace",
+					fontWeight: "700",
+					color: "white",
+				})}
+			>
+				Kyoo
+			</P>
+		</A>
+	);
+};
+
+export const Navbar = () => {
+	const { css } = useYoshiki();
+	const { t } = useTranslation("common");
+	/* const { data, error, isSuccess, isError } = useFetch(Navbar.query()); */
+
+	return (
+		<Header
+			{...css({
+				backgroundColor: (theme) => theme.appbar,
+				flexDirection: "row",
+				alignItems: "center",
+			})}
+		>
+			<IconButton
+				icon="menu"
+				aria-label="more"
+				aria-controls="menu-appbar"
+				aria-haspopup="true"
+				color="white"
+				{...css({ display: { xs: "flex", sm: "none" } })}
+			/>
+			{/* <Box sx={{ flexGrow: 1, display: { sx: "flex", sm: "none" } }} /> */}
+			<KyooTitle {...css({ marginRight: ts(1) })} />
+			{/* <Box sx={{ flexGrow: 1, display: { sx: "flex", sm: "none" } }} /> */}
+			<View {...css({ flexGrow: 1, flexDirection: "row", display: { xs: "none", sm: "flex" } })}>
+				{
+					/*isSuccess
+					? data.items.map((library) => */ true
+						? [...Array(4)].map((_, i) => (
+								<A
+									href={`/browse/${i /* library.slug */}`}
+									key={i} //{library.slug}
+									{...css({
+										marginX: ts(1),
+										textTransform: "uppercase",
+										color: "white",
+									})}
+								>
+									Toto
+									{/* {library.name} */}
+								</A>
+						  ))
+						: [...Array(4)].map(
+								(_, i) => null,
+								/* <Typography key={i} variant="button" px=".25rem"> */
+								/* 	<Skeleton width="5rem" /> */
+								/* </Typography> */
+						  )
+				}
+			</View>
+			<A href="/auth/login" {...tooltip(t("navbar.login"))} {...css({ p: 0 })}>
+				{/* <Avatar alt={t("navbar.login")} /> */}
+			</A>
+			{/* {isError && <ErrorSnackbar error={error} />} */}
+		</Header>
+	);
+};
+
+/* Navbar.query = (): QueryIdentifier<Page<Library>> => ({ */
+/* 	parser: Paged(LibraryP), */
+/* 	path: ["libraries"], */
+/* }); */