Add ui package that work with next

front/Dockerfile

@@ -5,6 +5,7 @@ COPY .yarnrc.yml ./
 COPY package.json yarn.lock ./
 COPY packages/web/package.json packages/web/package.json
 COPY packages/native/package.json packages/native/package.json
+COPY packages/app/package.json packages/app/package.json
 RUN yarn --immutable
 
 COPY . .

front/Dockerfile.native.dev

@@ -6,6 +6,7 @@ COPY .yarnrc.yml ./
 COPY package.json yarn.lock ./
 COPY packages/web/package.json packages/web/package.json
 COPY packages/native/package.json packages/native/package.json
+COPY packages/app/package.json packages/app/package.json
 RUN yarn --immutable
 
 EXPOSE 19000

front/Dockerfile.web.dev

@@ -6,6 +6,7 @@ COPY .yarnrc.yml ./
 COPY package.json yarn.lock ./
 COPY packages/web/package.json packages/web/package.json
 COPY packages/native/package.json packages/native/package.json
+COPY packages/app/package.json packages/app/package.json
 RUN yarn --immutable
 
 ENV NEXT_TELEMETRY_DISABLED 1

front/apps/web/next.config.js

@@ -20,6 +20,7 @@
 
 const path = require("path")
 const CopyPlugin = require("copy-webpack-plugin");
+const withTM = require("next-transpile-modules")(["@kyoo/ui"]);
 
 
 const suboctopus = path.dirname(require.resolve("@jellyfin/libass-wasm"));
@@ -67,4 +68,4 @@ if (process.env.NODE_ENV !== "production") {
 	];
 }
 
-module.exports = nextConfig;
+module.exports = withTM(nextConfig);

front/apps/web/package.json

@@ -14,6 +14,7 @@
 		"@emotion/react": "^11.9.3",
 		"@emotion/styled": "^11.9.3",
 		"@jellyfin/libass-wasm": "^4.1.1",
+		"@kyoo/ui": "workspace:^",
 		"@mui/icons-material": "^5.8.4",
 		"@mui/material": "^5.8.7",
 		"@mui/system": "^5.10.10",
@@ -24,6 +25,7 @@
 		"jotai": "^1.8.4",
 		"next": "12.2.2",
 		"next-translate": "^1.5.0",
+		"next-transpile-modules": "^9.1.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-infinite-scroll-component": "^6.1.0",

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

@@ -31,6 +31,7 @@ import Head from "next/head";
 import { useMobileHover } from "~/utils/utils";
 import { catppuccin } from "~/utils/themes/catppuccin";
 import { selectMode } from "~/utils/themes/theme";
+import { Toto } from "@kyoo/ui";
 
 // Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details)
 if (typeof window === "undefined") {
@@ -93,6 +94,7 @@ const App = ({ Component, pageProps }: AppProps) => {
 				<Hydrate state={queryState}>
 					<ThemeSelector>
 						<GlobalCssTheme />
+						<Toto />
 						{getLayout(<Component {...props} />)}
 					</ThemeSelector>
 				</Hydrate>

front/package.json

@@ -1,5 +1,5 @@
 {
-	"name": "front",
+	"name": "kyoo",
 	"private": true,
 	"scripts": {
 		"web": "yarn workspace web dev",
@@ -8,6 +8,7 @@
 		"lint": "eslint ."
 	},
 	"workspaces": [
+		"apps/*",
 		"packages/*"
 	],
 	"prettier": {

front/packages/native/metro.config.js

@@ -0,0 +1,22 @@
+// Learn more https://docs.expo.dev/guides/monorepos
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+// Find the project and workspace directories
+const projectRoot = __dirname;
+// This can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(projectRoot, "../..");
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+	path.resolve(projectRoot, "node_modules"),
+	path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

front/packages/native/package.json

@@ -9,6 +9,7 @@
 		"web": "expo start --web"
 	},
 	"dependencies": {
+		"app": "^0.1.0",
 		"expo": "~46.0.16",
 		"expo-status-bar": "~1.4.0",
 		"react": "18.0.0",

front/packages/native/src/app.tsx

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

front/packages/ui/package.json

@@ -0,0 +1,16 @@
+{
+	"name": "@kyoo/ui",
+	"main": "src/index.tsx",
+	"types": "src/index.tsx",
+	"packageManager": "yarn@3.2.4",
+	"devDependencies": {
+		"@types/react": "^18.0.24",
+		"typescript": "^4.8.4"
+	},
+	"peerDependencies": {
+		"react": "*"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.10.5"
+	}
+}

front/packages/ui/src/index.tsx

@@ -0,0 +1,4 @@
+// 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/toto.tsx

@@ -0,0 +1,3 @@
+export const Toto = () => {
+	return <button>tata</button>;
+}

front/packages/ui/tsconfig.json

@@ -0,0 +1,28 @@
+{
+	"compilerOptions": {
+		"target": "es5",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"declaration": true,
+		"sourceMap": true,
+		"noEmit": true,
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "node",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"jsxImportSource": "@emotion/react",
+		"types": ["@emotion/react/types/css-prop"],
+		"incremental": true,
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["src/*"]
+		}
+	},
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules"]
+}