Add a working WIP example

apps/photos/package.json

@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "@date-io/date-fns": "^2.14.0",
+        "@repo/ui": "*",
         "@ente-io/utils": "*",
         "@mui/x-date-pickers": "^5.0.0-alpha.6",
         "@sentry/nextjs": "^7.77.0",

apps/web/app/page.tsx

@@ -0,0 +1,12 @@
+import { Card } from "@repo/ui/card";
+import { sayHello } from "@repo/ui/hello";
+
+export default function Page(): JSX.Element {
+    sayHello();
+
+    return (
+        <main>
+            <Card href={"http://example.org"}>Card</Card>
+        </main>
+    );
+}

apps/web/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/web/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  transpilePackages: ["@repo/ui"],
+};

apps/web/package.json

@@ -0,0 +1,22 @@
+{
+    "name": "web",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start"
+    },
+    "dependencies": {
+        "@repo/ui": "*",
+        "next": "^14.0.4",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.10.6",
+        "@types/react": "^18.2.46",
+        "@types/react-dom": "^18.2.18",
+        "typescript": "^5.3.3"
+    }
+}

apps/web/tsconfig.json

@@ -0,0 +1,35 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "display": "Next.js",
+    "compilerOptions": {
+        "declaration": true,
+        "declarationMap": true,
+        "esModuleInterop": true,
+        "incremental": false,
+        "isolatedModules": true,
+        "lib": ["es2022", "DOM", "DOM.Iterable"],
+        // "module": "NodeNext",
+        "moduleDetection": "force",
+        // "moduleResolution": "NodeNext",
+        "noUncheckedIndexedAccess": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "target": "ES2022",
+
+        "plugins": [{ "name": "next" }],
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "allowJs": true,
+        "jsx": "preserve",
+        "noEmit": true
+    },
+    "include": [
+        "next-env.d.ts",
+        "next.config.js",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts"
+    ],
+    "exclude": ["node_modules"]
+}

package.json

@@ -14,6 +14,7 @@
         "dev:auth": "turbo run dev --filter=auth",
         "dev:photos": "turbo run dev --filter=photos",
         "dev:accounts": "turbo run dev --filter=accounts",
+        "dev:web": "turbo run dev --filter=web",
         "dev:cast": "turbo run dev --filter=cast",
         "export:photos": "turbo run export --filter=photos",
         "export:auth": "turbo run export --filter=auth",

packages/shared/next/next.config.base.js

@@ -36,6 +36,7 @@ const nextConfig = {
         },
     },
     transpilePackages: [
+        "@repo/ui",
         '@ente-io/utils',
         '@mui/material',
         '@mui/system',

packages/ui/package.json

@@ -0,0 +1,15 @@
+{
+    "name": "@repo/ui",
+    "version": "0.0.0",
+    "private": true,
+    "exports": {
+        "./hello": "./src/hello.ts",
+        "./card": "./src/card.tsx"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.46",
+        "@types/react-dom": "^18.2.18",
+        "react": "^18.2.0",
+        "typescript": "^5.3.3"
+    }
+}

packages/ui/src/card.tsx

@@ -0,0 +1,14 @@
+/** Test comment */
+export function Card({
+    href,
+    children,
+}: {
+    href: string;
+    children: React.ReactNode;
+}): JSX.Element {
+    return (
+        <a href={href} rel="noopener noreferrer" target="_blank">
+            <p>{children}</p>
+        </a>
+    );
+}

packages/ui/src/hello.ts

@@ -0,0 +1,2 @@
+/** Howdy! */
+export const sayHello = () => console.log("Hello, world");

packages/ui/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "isolatedModules": true,
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "NodeNext",
+    "moduleDetection": "force",
+    "moduleResolution": "NodeNext",
+    "noUncheckedIndexedAccess": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2022",
+    "jsx": "preserve",
+
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}