ディレクトリ構造とスクリプトの修正と Storkbook の追加

biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

docs/developer_readme.md

@@ -9,10 +9,15 @@ bun install --frozen-lockfile
 
 ## 開発
 
-開発モードを実行するには、以下のコマンドを実行してください。
 
 ```bash
+# 開発モードを実行するには、以下のコマンドを実行してください。
+# localhost:5173 に Vite サーバーが立ち上がるので、そこで確認してください。
 bun dev
+
+# Storybookの使用
+# localhost:6006にStorybookが立ち上がるので、そこでUIを確認してください。
+bun run storybook
 ```
 
 コードをプッシュする前に、コード品質をチェックするために以下のコマンドを実行してください。
@@ -60,9 +65,3 @@ Userのデータは`User`クラスを使用して扱います。Userのデータ
 	}
 }
 ```
-
-## Storybookの使用
-```bash
-bun run storybook
-```
- - localhost:6006にStorybookが立ち上がるので、そこでUIを確認してください。

package.json

@@ -8,11 +8,13 @@
   "scripts": {
     "dev": "bun --filter=@packages/{web,server} dev",
     "dev:mock": "bun --filter=@packages/{web,server} dev:mock",
+    "storybook": "concurrently 'cd packages/server; bun dev' 'cd packages/web; bun run storybook'",
     "build": "cd packages/web && bun run build",
     "check": "bunx biome check .",
     "fix": "bunx biome check . --fix"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.1.1"
+    "@biomejs/biome": "^2.1.1",
+    "concurrently": "^9.2.0"
   }
 }

packages/models/models.ts

@@ -1,15 +1,93 @@
 import { t } from "elysia";
 
-export type CreateUser = typeof CreateUser.static;
-export const CreateUser = t.Object({
-  name: t.String({
-    minLength: 1,
-    maxLength: 255,
-  }),
-});
+// TODO: Elysia のスキーマにする
+// サンプル変換:
 
-export type User = typeof User.static;
-export const User = t.Object({
-  id: t.String({ format: "uuid" }),
-  ...CreateUser.properties,
+export type Stream = typeof Stream.static;
+export const Stream = t.Enum({
+  s1: "s1",
+  s2: "s2",
+  s3: "s3",
+  l1: "l1",
+  l2: "l2",
+  l3: "l3",
 });
+
+export type User = {
+  stream: Stream | undefined;
+  grade: number | undefined;
+  classNumber: number | undefined;
+};
+
+export type ClassDataType = {
+  code: string;
+  type: string;
+  category: string;
+  semester: string;
+  dayPeriod: DayPeriod[] | "集中";
+  classroom: string;
+  titleJp: string;
+  lecturer: string;
+  titleEn: string;
+  lecturerEn: string;
+  ccCode: string;
+  credits: number;
+  detail: string;
+  schedule: string;
+  methods: string;
+  evaluation: string;
+  notes: string;
+  class: string;
+  guidance: string;
+  guidanceDate: string;
+  guidancePeriod: string;
+  time: number;
+  timeCompensation: string;
+  targetClass: string[][];
+  importance: string[][];
+  shortenedCategory: string;
+  shortenedEvaluation: string;
+  shortenedClassroom: string;
+};
+
+export type Day = "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+
+export type DayPeriod = {
+  day: Day;
+  period: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+export const dayMapping: { [key in Day]: string } = {
+  mon: "月",
+  tue: "火",
+  wed: "水",
+  thu: "木",
+  fri: "金",
+  sat: "土",
+};
+
+/**
+ * セメスターを表現する型
+ */
+export type Semester = "S" | "S1" | "S2" | "A" | "A1" | "A2";
+
+/**
+ * 評価方法を表現する型
+ */
+export type Evaluation = "試験" | "レポート" | "出席" | "平常";
+
+/**
+ * セメスターを表現する型
+ */
+export type ClassType =
+  | "基礎"
+  | "要求"
+  | "主題"
+  | "展開"
+  | "L"
+  | "A"
+  | "B"
+  | "C"
+  | "D"
+  | "E"
+  | "F";

packages/server/app.ts

@@ -1,31 +1,11 @@
 import { cors } from "@elysiajs/cors";
 import { Elysia } from "elysia";
-import { auth } from "./lib/auth.ts";
-import { usersRouter } from "./router/users.sample.ts";
-
-const betterAuth = new Elysia({ name: "better-auth" })
-  .mount(auth.handler)
-  .macro({
-    auth: {
-      async resolve({ status, request: { headers } }) {
-        const session = await auth.api.getSession({
-          headers,
-        });
-        if (!session) return status(401);
-
-        return {
-          user: session.user,
-          session: session.session,
-        };
-      },
-    },
-  });
+import { betterAuth } from "./lib/auth.ts";
 
 export const app = new Elysia({
   prefix: "/api",
 })
   .use(betterAuth)
-  .use(cors())
-  .group("/users", (app) => app.use(usersRouter));
+  .use(cors());
 
 export type App = typeof app;

packages/server/lib/auth.ts

@@ -1,5 +1,6 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import Elysia from "elysia";
 import { db } from "../db/index.ts";
 import * as schema from "../db/schema.ts";
 
@@ -16,3 +17,22 @@ export const auth = betterAuth({
   },
   trustedOrigins: [process.env.PUBLIC_WEB_URL ?? "http://localhost:3000"],
 });
+
+const betterAuthMacro = new Elysia({ name: "better-auth" })
+  .mount(auth.handler)
+  .macro({
+    auth: {
+      async resolve({ status, request: { headers } }) {
+        const session = await auth.api.getSession({
+          headers,
+        });
+        if (!session) return status(401);
+
+        return {
+          user: session.user,
+          session: session.session,
+        };
+      },
+    },
+  });
+export { betterAuthMacro as betterAuth };

packages/web/.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type { Preview } from "@storybook/react";
+import "../src/app.css";
+import { ThemeContext, useThemeProvider } from "@/services/theme/index.ts";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
+
+export const decorators = [
+  (Story: () => React.ReactNode) => {
+    const provider = useThemeProvider();
+    return (
+      <ThemeContext.Provider value={provider}>
+        <Story />
+      </ThemeContext.Provider>
+    );
+  },
+];

packages/web/src/App.tsx

@@ -1,22 +1,24 @@
+import type { User } from "@packages/models";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { ThemeContext } from "@/app/context";
-import type { RegisterType, ThemeType } from "@/app/type";
-import { UserContext, type UserContextValue } from "@/app/UserContext";
-import { User } from "@/app/utils/user";
-import Footer from "./app/components/Footer/index.tsx";
-import Header from "./app/components/Header/index.tsx";
+import {
+  UserContext,
+  type UserContextValue,
+} from "@/services/user/UserContext.ts";
+import { UserService } from "@/services/user/user.ts";
+import Footer from "./components/Footer/index.tsx";
+import Header from "./components/Header/index.tsx";
 import { queryClient } from "./lib/tanstack/client.ts";
 import AboutUs from "./pages/AboutUs.tsx";
 import Disclaimer from "./pages/Disclaimer.tsx";
 import Home from "./pages/Home.tsx";
-import HowToUse from "./pages/HowToUse.tsx";
+import HowToUse from "./pages/how-to-use/page.tsx";
 import NotFound from "./pages/NotFound.tsx";
 import Notion from "./pages/Notion.tsx";
 import Profile from "./pages/Profile.tsx";
 import SignIn from "./pages/SignIn.tsx";
-import UserManagement from "./sample/UserManagement.tsx";
+import { ThemeContext, useThemeProvider } from "./services/theme/index.ts";
 
 /**
  * App コンポーネントは、アプリケーション全体のレイアウトを定義します。
@@ -29,18 +31,14 @@ export default function App() {
   /**
    * テーマ管理
    */
-  const [theme, setTheme] = useState<ThemeType>("light");
-  // the only proper use of useEffect
-  useEffect(() => {
-    document.body.setAttribute("data-theme", theme);
-  }, [theme]);
+  const themeService = useThemeProvider();
 
-  const userInstance = new User();
-  const [user, setUserState] = useState<RegisterType | undefined>(
+  const userInstance = new UserService();
+  const [user, setUserState] = useState<User | undefined>(
     userInstance.getUser(),
   );
 
-  const setUser = (newUser: RegisterType) => {
+  const setUser = (newUser: User) => {
     userInstance.setUser(newUser);
     setUserState(newUser);
   };
@@ -51,7 +49,7 @@ export default function App() {
   };
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
+    <ThemeContext.Provider value={themeService}>
       <UserContext.Provider value={userContextValue}>
         <QueryClientProvider client={queryClient}>
           <div
@@ -66,7 +64,6 @@ export default function App() {
                   <Route path="/disclaimer" element={<Disclaimer />} />
                   <Route path="/how-to-use" element={<HowToUse />} />
                   <Route path="/notion" element={<Notion />} />
-                  <Route path="/sample" element={<UserManagement />} />
                   <Route path="/sign-in" element={<SignIn />} />
                   <Route path="/profile" element={<Profile />} />
                   <Route path="*" element={<NotFound />} />