Merge remote-tracking branch 'origin/main' into thisagi

.env.example

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=

.github/workflows/ci.yaml

@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup | Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 20
           # node-version-file: .nvmrc

README.md

@@ -20,6 +20,7 @@ Mac や WSL では [mise](https://mise.jdx.dev/getting-started.html) 等を経
 ```sh
 npm install
 ```
+`.env.example` ファイルをコピーして `.env` ファイルを作成し、環境変数を設定してください。(イコールの間に空白を入れないよう注意)
 
 ## 開発
 

app/components/Loading.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+export const Loading = (): ReactNode => (
+	<div className="flex h-dvh w-dvw items-center justify-center">
+		<div className="h-32 w-32 animate-spin rounded-full border-gray-900 border-t-2 border-b-2" />
+	</div>
+);

app/hooks/useSession.ts

@@ -0,0 +1,41 @@
+import type { Session } from "@supabase/supabase-js";
+import useSWRImmutable from "swr/immutable";
+import useSWRSubscription from "swr/subscription";
+import type { SWRSubscriptionOptions } from "swr/subscription";
+import { supabase } from "~/libs/supabase";
+
+export function useSession(): Session | null {
+	const key = "session";
+	const { data: initialSession } = useSWRImmutable(
+		key,
+		async () => {
+			const {
+				data: { session },
+			} = await supabase.auth.getSession();
+
+			return session;
+		},
+		{
+			suspense: true,
+		},
+	);
+
+	const { data: session } = useSWRSubscription(
+		key,
+		(_, { next }: SWRSubscriptionOptions<Session | null, unknown>) => {
+			const {
+				data: { subscription },
+			} = supabase.auth.onAuthStateChange((_event, session) => {
+				next(null, session);
+			});
+
+			return subscription.unsubscribe;
+		},
+		{
+			suspense: true,
+			fallbackData: initialSession,
+		},
+	);
+
+	return session ?? null;
+}

app/libs/getAccountCredentials.ts

@@ -0,0 +1,11 @@
+import type { SignInWithPasswordCredentials } from "@supabase/supabase-js";
+
+export function getAccountCredentials(
+	id: string,
+): SignInWithPasswordCredentials {
+	return {
+		// supabase は userId のみでサインインできないため、強引にやる
+		email: `email-${id}@example.com`,
+		password: "password",
+	};
+}

app/libs/supabase.ts

@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const supabase = createClient(
+	import.meta.env.VITE_SUPABASE_URL,
+	import.meta.env.VITE_SUPABASE_ANON_KEY,
+);

app/root.tsx

@@ -6,6 +6,8 @@ import {
 	ScrollRestoration,
 } from "@remix-run/react";
 import "./tailwind.css";
+import { Suspense } from "react";
+import { Loading } from "./components/Loading";
 
 export function Layout({ children }: { children: React.ReactNode }) {
 	return (
@@ -26,5 +28,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
 }
 
 export default function App() {
-	return <Outlet />;
+	return (
+		<Suspense fallback={<Loading />}>
+			<Outlet />
+		</Suspense>
+	);
 }

app/routes/_auth._index.tsx

@@ -0,0 +1,43 @@
+import type { MetaFunction } from "@remix-run/node";
+import { useSession } from "~/hooks/useSession";
+
+export const meta: MetaFunction = () => {
+	return [
+		{ title: "New Remix App" },
+		{ name: "description", content: "Welcome to Remix!" },
+	];
+};
+
+export default function Index() {
+	const session = useSession();
+
+	// 未サインインの場合
+	if (!session)
+		return (
+			<main className="grid h-dvh w-dvw grid-rows-2">
+				<h1 className="p-4 text-center text-4xl">Game</h1>
+				<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+					<a
+						href="/signup"
+						type="button"
+						className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+					>
+						匿名で登録
+					</a>
+				</div>
+			</main>
+		);
+
+	// サインイン済みの場合
+	return (
+		<main className="grid h-dvh w-dvw grid-rows-2">
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				Hello World
+			</div>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				ID: {session.user.email?.replace("@example.com", "")}
+			</div>
+		</main>
+	);
+}

app/routes/_auth.tsx

@@ -0,0 +1,17 @@
+import { Outlet, useNavigate } from "@remix-run/react";
+import { type ReactNode, useLayoutEffect } from "react";
+import { useSession } from "~/hooks/useSession";
+
+// _auth.**.tsx のパスへのアクセスは必ずここで前処理される
+export default function Layout(): ReactNode {
+	const navigate = useNavigate();
+	const session = useSession();
+
+	useLayoutEffect(() => {
+		if (!session) {
+			navigate("/signup");
+		}
+	}, [session, navigate]);
+
+	return <Outlet />;
+}

app/routes/_noauth.signin.tsx

@@ -0,0 +1,55 @@
+import { useNavigate } from "@remix-run/react";
+import type { ReactNode } from "react";
+import { useForm } from "react-hook-form";
+import { getAccountCredentials } from "~/libs/getAccountCredentials";
+import { supabase } from "~/libs/supabase";
+
+type FormValues = {
+	id: string;
+};
+
+export default function Signin(): ReactNode {
+	// ID でサインイン、デバッグ用(そもそもログアウトは想定していない)
+	const navigate = useNavigate();
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<FormValues>({
+		mode: "onBlur",
+	});
+
+	const onSubmit = async ({ id }: FormValues) => {
+		const { error } = await supabase.auth.signInWithPassword(
+			getAccountCredentials(id),
+		);
+
+		if (error) {
+			console.error(error);
+			return;
+		}
+
+		navigate("/");
+	};
+
+	return (
+		<main>
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<h2 className="p-4 text-center text-2xl">ID でサインイン</h2>
+			<form onSubmit={handleSubmit(onSubmit)}>
+				<input
+					type="text"
+					className="rounded-lg bg-gray-100 px-4 py-2 text-center font-bold outline-pink-500"
+					placeholder="ID"
+					{...register("id")}
+				/>
+			</form>
+			<button
+				type="submit"
+				className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+			>
+				サインイン
+			</button>
+		</main>
+	);
+}

app/routes/_noauth.signup.tsx

@@ -0,0 +1,34 @@
+import { useNavigate } from "@remix-run/react";
+import { v4 } from "uuid";
+import { getAccountCredentials } from "~/libs/getAccountCredentials";
+import { supabase } from "~/libs/supabase";
+
+export default function Signup() {
+	const navigate = useNavigate();
+
+	const signUp = async () => {
+		const id = v4();
+		const { error } = await supabase.auth.signUp(getAccountCredentials(id));
+
+		if (error) {
+			console.error("Error signing up:", error.message);
+			return;
+		}
+
+		navigate("/");
+	};
+	return (
+		<main className="grid h-dvh w-dvw grid-rows-2">
+			<h1 className="p-4 text-center text-4xl">Game</h1>
+			<div className="mx-auto flex max-w-96 flex-col gap-2 p-4">
+				<button
+					type="button"
+					className="rounded-lg bg-pink-500 px-4 py-2 text-center font-bold text-white"
+					onClick={signUp}
+				>
+					匿名で登録
+				</button>
+			</div>
+		</main>
+	);
+}

app/routes/_noauth.tsx

@@ -0,0 +1,19 @@
+import { Outlet, useNavigate } from "@remix-run/react";
+import type { ReactNode } from "react";
+import { useLayoutEffect } from "react";
+
+import { useSession } from "~/hooks/useSession";
+
+// _noauth.**.tsx のパスへのアクセスは必ずここで前処理される
+export default function Layout(): ReactNode {
+	const navigate = useNavigate();
+	const session = useSession();
+
+	useLayoutEffect(() => {
+		if (session) {
+			navigate("/");
+		}
+	}, [session, navigate]);
+
+	return <Outlet />;
+}

biome.jsonc

@@ -6,7 +6,10 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"nursery": {
+				"useSortedClasses": "warn"
+			}
 		}
 	},
 	"formatter": {