Skip to content

Feature/#16 screen mock insite#20

Merged
273Do merged 25 commits into
developfrom
feature/#16-screen-mock-insite
May 24, 2026
Merged

Feature/#16 screen mock insite#20
273Do merged 25 commits into
developfrom
feature/#16-screen-mock-insite

Conversation

@273Do
Copy link
Copy Markdown
Owner

@273Do 273Do commented May 24, 2026

概要

実施した内容

insight画面のモック実装

  • 各フィールドの統計カードを実装

チェックリスト

  • コードがプロジェクトのスタイルガイドラインに従っている
  • セルフレビューを完了
  • 複雑なコードにコメントを追加
  • ドキュメントを更新(該当する場合)
  • 破壊的変更なし(またはやむを得ない場合は文書化済み)
  • ci / cd を通過

備考

関連 Issue

Closes #16

Summary by CodeRabbit

  • New Features

    • Insights タブを追加:ジャーナル選択チップ、週間サマリー、フィールド別ステータスカードとチャートで統計を表示
  • Improvements

    • Save ボタンの表示をフォーム状態に応じて動的に切替
    • タブ構成を整理し、Explore を Insights に差替え
    • プレビュー生成・入力初期化・値の取扱いをより厳密に
  • Refactor

    • 型安全性強化(型アサーション規則の見直し)
  • Documentation

    • リポジトリ運用ガイドを追記・整備

Review Change Stack

@273Do 273Do self-assigned this May 24, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 24, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9263809a-9eaf-49b8-a447-eed64138bd0e

📥 Commits

Reviewing files that changed from the base of the PR and between 2f15f3a and 3c571a3.

📒 Files selected for processing (2)
  • src/components/entry/entry-list-view.tsx
  • src/components/insights/stat-filed-item.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/components/entry/entry-list-view.tsx

Walkthrough

ESLintでas以外の型アサーションを禁止し型安全化を行い、Insightsタブとスクリーン(レイアウト、Journal選択、StatsList、統計カード群、チャート整形ユーティリティ)を追加、ExploreのChartDemoを削除、関連ドキュメントを更新しました。

Changes

Insights画面実装

Layer / File(s) Summary
ESLint型安全化とコード修正
eslint.config.js, src/components/entry/entry-field-item.tsx, src/components/entry/entry-list-view.tsx, src/utils/entry/preview.ts, src/utils/journal/use-journal-field.ts
no-restricted-syntaxas const以外の型アサーションを禁止。型ガード導入や既存キャストの削除、FIELD_TYPES/defaultMetaの型安全化を行った。
ヘッダーボタンバリアント統一
src/app/(journal)/create.tsx, src/app/(journal)/edit.tsx, src/app/(journal)/entry/[id].tsx, src/app/(journal)/entry/create.tsx, src/components/app-tabs.tsx
Stack.Screenのunstable_headerRightItemsで生成するSave/Createボタンにvariantを追加し、formDisabled"prominent"を切替。タブ名をexploreinsightsに変更。
Insightsスクリーン基盤レイアウト
src/app/insights/_layout.tsx, src/app/insights/index.tsx
Expo Router用のInsightsレイアウト(色スキーム反映、透明ヘッダー)とInsightsScreen定義(タイトル、ヘッダーボタン、InsightsViewマウント)。
統計データチャートフォーマット
src/utils/insights/chart-format.ts
過去7日分のデータ整形関数群(chartDateFormat, chartNumberFormat, chartCheckFormat, chartTimeScatterFormat, chartFieldValueFormat)を追加。
統計カードコンポーネント群
src/components/insights/stat-card.tsx, src/components/insights/stat-card-*.tsx, src/components/insights/stat-filed-item.tsx
StatCard基本実装とText/LongText/Number/Check/Date/Time各カード、及びフィールド種別でカードを切替えるStatFieldItemを追加。Chartデータを受けてレンダリング。
Insightsスクリーン統合UI
src/components/insights/insights-view.tsx, src/components/insights/journal-chip.tsx, src/components/insights/stats-list.tsx, src/components/insights/weekly-summary-card.tsx
InsightsViewでジャーナル一覧をライブ取得・選択管理、JournalChipListで切替、StatsListでWeeklySummaryCardと各フィールドのStatCard列挙を表示。
画面遷移とドキュメント更新
src/app/explore.tsx, src/components/chart-demo.tsx (削除), CLAUDE.md
ExploreからChartDemoの表示とファイルを削除。CLAUDE.mdにDrizzle/useLiveQueryの監視範囲、フォーム初期化方針、entry_valuesのシリアライズ仕様、プレビューパイプライン、Keyboard.dismiss順序、ネイティブヘッダ設定、e.nativeEvent.text扱い注意などを追記。

🎯 4 (Complex) | ⏱️ ~75 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning PR には Insite 画面実装に直接関連しない変更が含まれています。eslint.config.js の no-restricted-syntax ルール追加、各ジャーナル画面のボタンスタイル修正(create.tsx、edit.tsx、entry/[id].tsx など)、ChartDemo 削除、ExploreScreen から ChartDemo の import 削除、AppTabs のタブ変更(explore → insights)などは、Insite 画面実装以外のスコープと考えられます。 Insite 画面モック実装に関連しない変更(eslint ルール、ジャーナル画面ボタン修正、ChartDemo 削除など)を別の PR に分離してください。
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed タイトルは「Feature/#16 screen mock insite」で、PR の主要な目的である Insite 画面のモック実装を指していますが、内容が多岐にわたり、ボタンスタイルの変更やコンポーネント削除などの実装の詳細が反映されていません。
Linked Issues check ✅ Passed Issue #16 は「Insite 画面のモック実装」で、統計カードなど各種機能のモック実装が求められており、本 PR はこれを完全に達成しています。InsightsView、複数の StatCard* コンポーネント、チップリスト、週間サマリーカード、チャートフォーマット関数など必要な機能がすべて実装されています。
Docstring Coverage ✅ Passed Docstring coverage is 90.48% which is sufficient. The required threshold is 80.00%.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/#16-screen-mock-insite

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
src/app/(journal)/entry/create.tsx (1)

21-21: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

useLiveQuery に依存配列を追加してください。

journalId は動的なパラメータですが、useLiveQuery の第2引数に依存配列が渡されていません。コーディング規約により、動的な引数を渡す場合は依存配列が必須です。journalId が変更された際にクエリが再実行されない可能性があります。

🔧 修正案
- const { data: fields } = useLiveQuery(getFieldsQuery(journalId));
+ const { data: fields } = useLiveQuery(getFieldsQuery(journalId), [journalId]);

コーディング規約: useLiveQuery に動的な引数を渡す場合は第2引数に依存配列を渡す

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/`(journal)/entry/create.tsx at line 21, The useLiveQuery call (const
{ data: fields } = useLiveQuery(getFieldsQuery(journalId))) is missing a
dependency array for the dynamic journalId; update the call to pass a second
argument dependency array that includes journalId (e.g.,
useLiveQuery(getFieldsQuery(journalId), [journalId])) so the query re-executes
when journalId changes and adheres to the project's rule about dynamic args.
🧹 Nitpick comments (2)
src/components/app-tabs.tsx (1)

10-10: 💤 Low value

エクスポートされるコンポーネントに JSDoc を追加することを推奨します。

コーディング規約では、エクスポートされる関数・コンポーネントには JSDoc コメントを記載することが推奨されています。

📝 JSDoc 追加例
+/**
+ * ネイティブタブナビゲーション
+ * Journal タブと Insights タブを提供します
+ */
 export default function AppTabs() {

コーディング規約: エクスポートされる関数・コンポーネントには JSDoc(/** ... */)を記載する

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/app-tabs.tsx` at line 10, エクスポートされるコンポーネント AppTabs に JSDoc
コメントを追加してください — コンポーネントの目的を一行で説明し、受け取る props があればそれらの型と説明を `@param` で、戻り値が
React.ReactElement であることを `@returns` で明記してください(例: /** コンポーネント説明. `@param` props -
... `@returns` React.ReactElement */)。JSDoc は関数宣言直前に配置し、既存の型注釈(もしあれば)と整合させてください。
src/app/insights/_layout.tsx (1)

1-7: ⚡ Quick win

ヘッダータイトル色は PlatformColor("label") を直接使ってください。

Line 6-7 で useColorScheme() とハードコード色を使っており、規約のアダプティブカラー方針から外れています。headerTitleStyle.colorPlatformColor("label") で統一してください。

修正案
-import { useColorScheme } from "react-native";
+import { PlatformColor } from "react-native";
@@
 export default function InsightsLayout() {
-  const colorScheme = useColorScheme();
-  const titleColor = colorScheme === "dark" ? "`#ffffff`" : "`#000000`";
-
   return (
     <Stack
       screenOptions={{
         headerTransparent: true,
         headerTitleStyle: {
-          color: titleColor,
+          color: PlatformColor("label"),
         },
         headerBackButtonDisplayMode: "minimal",
       }}
     />
   );
 }

As per coding guidelines Use PlatformColor("label") directly for adaptive colors — no need for useColorScheme.

Also applies to: 13-15

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/insights/_layout.tsx` around lines 1 - 7, Replace the ad-hoc color
handling in InsightsLayout by removing useColorScheme and titleColor and set
headerTitleStyle.color to PlatformColor("label") directly; specifically, in the
InsightsLayout component remove the useColorScheme import and variable
(useColorScheme, titleColor) and update any usage of titleColor (e.g.,
headerTitleStyle.color) to PlatformColor("label") so the header uses the
adaptive system color consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/insights/index.tsx`:
- Around line 1-3: The header right button handler in unstable_headerRightItems
is still calling console.log("test") so it doesn't navigate; import useRouter
from "expo-router", call const router = useRouter() inside the Insights page
component, and replace the onPress handler in unstable_headerRightItems with
router.push("/(journal)/create") so the "Create New Journal" button navigates
correctly (look for unstable_headerRightItems and InsightsView in this file to
apply the change).

In `@src/components/entry/entry-list-view.tsx`:
- Line 103: The tintColor uses a misspelled semantic color name
PlatformColor("systemGra1y3") which must exactly match native semantic names;
replace the string "systemGra1y3" with "systemGray3" where
PlatformColor("systemGra1y3") is used (the tintColor assignment in EntryListView
/ entry-list-view.tsx) so the call becomes
PlatformColor("systemGray3").toString().

In `@src/components/insights/insights-view.tsx`:
- Around line 28-30: The fallback for accentColor currently uses
PlatformColor("systemIndigo").toString(), which may not produce a usable string;
update the logic in the activeJournalData/accentColor assignment to ensure
accentColor is always a string by replacing the PlatformColor fallback with an
explicit hex color (e.g. "`#007AFF`") and keep using activeJournalData?.color when
present; adjust any related typing if necessary and remove reliance on
PlatformColor().toString() in the accentColor expression.

In `@src/components/insights/stat-filed-item.tsx`:
- Around line 11-14: Add a JSDoc block for the exported type FieldValueEntry
describing the purpose of the type and each field: document that createdAt is a
Unix timestamp number and value is a string or null (nullable), include a short
summary sentence and `@property` tags for createdAt and value so the exported type
(FieldValueEntry) follows the project coding guidelines.

---

Outside diff comments:
In `@src/app/`(journal)/entry/create.tsx:
- Line 21: The useLiveQuery call (const { data: fields } =
useLiveQuery(getFieldsQuery(journalId))) is missing a dependency array for the
dynamic journalId; update the call to pass a second argument dependency array
that includes journalId (e.g., useLiveQuery(getFieldsQuery(journalId),
[journalId])) so the query re-executes when journalId changes and adheres to the
project's rule about dynamic args.

---

Nitpick comments:
In `@src/app/insights/_layout.tsx`:
- Around line 1-7: Replace the ad-hoc color handling in InsightsLayout by
removing useColorScheme and titleColor and set headerTitleStyle.color to
PlatformColor("label") directly; specifically, in the InsightsLayout component
remove the useColorScheme import and variable (useColorScheme, titleColor) and
update any usage of titleColor (e.g., headerTitleStyle.color) to
PlatformColor("label") so the header uses the adaptive system color
consistently.

In `@src/components/app-tabs.tsx`:
- Line 10: エクスポートされるコンポーネント AppTabs に JSDoc コメントを追加してください —
コンポーネントの目的を一行で説明し、受け取る props があればそれらの型と説明を `@param` で、戻り値が React.ReactElement
であることを `@returns` で明記してください(例: /** コンポーネント説明. `@param` props - ... `@returns`
React.ReactElement */)。JSDoc は関数宣言直前に配置し、既存の型注釈(もしあれば)と整合させてください。
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 407d776c-5772-4404-939c-98cba6116cb9

📥 Commits

Reviewing files that changed from the base of the PR and between 20196ee and 2f15f3a.

📒 Files selected for processing (28)
  • CLAUDE.md
  • eslint.config.js
  • src/app/(journal)/create.tsx
  • src/app/(journal)/edit.tsx
  • src/app/(journal)/entry/[id].tsx
  • src/app/(journal)/entry/create.tsx
  • src/app/explore.tsx
  • src/app/insights/_layout.tsx
  • src/app/insights/index.tsx
  • src/components/app-tabs.tsx
  • src/components/chart-demo.tsx
  • src/components/entry/entry-field-item.tsx
  • src/components/entry/entry-list-view.tsx
  • src/components/insights/insights-view.tsx
  • src/components/insights/journal-chip.tsx
  • src/components/insights/stat-card-check.tsx
  • src/components/insights/stat-card-date.tsx
  • src/components/insights/stat-card-long-text.tsx
  • src/components/insights/stat-card-number.tsx
  • src/components/insights/stat-card-text.tsx
  • src/components/insights/stat-card-time.tsx
  • src/components/insights/stat-card.tsx
  • src/components/insights/stat-filed-item.tsx
  • src/components/insights/stats-list.tsx
  • src/components/insights/weekly-summary-card.tsx
  • src/utils/entry/preview.ts
  • src/utils/insights/chart-format.ts
  • src/utils/journal/use-journal-field.ts
💤 Files with no reviewable changes (2)
  • src/components/chart-demo.tsx
  • src/app/explore.tsx

Comment thread src/app/insights/index.tsx
Comment thread src/components/entry/entry-list-view.tsx Outdated
Comment thread src/components/insights/insights-view.tsx
Comment thread src/components/insights/stat-filed-item.tsx
@273Do 273Do merged commit e8a0162 into develop May 24, 2026
3 checks passed
@coderabbitai coderabbitai Bot mentioned this pull request May 24, 2026
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Insite 画面のモック実装

1 participant