Skip to content

chore(deps): bump 5 dependencies (date-fns, eslint-plugin-react-hooks, react-resizable-panels, recharts, wrangler) and fix breaking changes#17

Merged
otomatty merged 9 commits into
mainfrom
claude/merge-dependabot-prs-zIhAx
May 19, 2026
Merged

chore(deps): bump 5 dependencies (date-fns, eslint-plugin-react-hooks, react-resizable-panels, recharts, wrangler) and fix breaking changes#17
otomatty merged 9 commits into
mainfrom
claude/merge-dependabot-prs-zIhAx

Conversation

@otomatty
Copy link
Copy Markdown
Owner

@otomatty otomatty commented May 19, 2026

Summary

5 件の Dependabot PR (#9, #12, #14, #15, #16) を統合し、major bump 由来の breaking changes に対応したコンシリデーション PR です。

依存関係の更新 (cherry-pick で個別コミット)

パッケージ 種別 旧 → 新 元 PR
date-fns prod 3.6.0 → 4.1.0 #15
eslint-plugin-react-hooks dev 5.2.0 → 7.0.1 #9
react-resizable-panels prod 2.1.9 → 4.0.15 #12
recharts prod 2.15.4 → 3.6.0 #14
wrangler dev 3.114.16 → 4.54.0 #16

Breaking change への追従

  • recharts v3 (src/components/ui/chart.tsx)
    • ChartTooltipContent の props 型を TooltipContentProps に変更(v3 で Tooltip の props から payload/label が除外され、content render prop 側に移動)
    • ChartLegendContent の props 型を DefaultLegendContentProps に変更
    • formatter 呼び出し時の引数型を ValueType に整合
  • react-resizable-panels v4 (src/components/ui/resizable.tsx)
    • PanelGroupGroupPanelResizeHandleSeparator にリネーム
    • ※ 本ファイルは現在 import 元なし(dead-ish UI primitive)。runtime 影響なし、typecheck だけ整合
  • eslint-plugin-react-hooks v7 (eslint.config.mjs)
    • v7 の recommended には set-state-in-effect/purity/immutability 等の厳格ルールが多数追加され、既存コードに 23 件の新規エラーが発生
    • v5 相当の rules-of-hooks (error) + exhaustive-deps (warn) にピン留めし、baseline を維持
    • 新ルールの段階的導入は別 PR で対応する想定

lockfile

bun installbun.lock を再生成(個別コミット)。

Test plan

  • bun run typecheck — pre-existing な src/lib/tauri.ts の 2 エラー以外は解消(main にも同じエラーあり、chore(deps-dev): bump wrangler from 3.114.16 to 4.54.0 #16 等の CI でも失敗中)
  • bun run lint — 0 errors / 10 warnings(main baseline と同じ)
  • bun run test:run — 148/148 passing
  • bun run build — success
  • ブラウザでの StatsScreen.tsx(recharts 利用箇所)の見た目確認(recharts v3 移行のため要 manual check)

CI ステータスと既知の問題

  • ✅ Test / Lint / Build / Validate Migrations / Cloudflare Pages
  • ❌ Type Check — src/lib/tauri.ts@tauri-apps/plugin-os / @tauri-apps/plugin-shell モジュール解決エラー(pre-existing、main の他 PR chore(deps-dev): bump wrangler from 3.114.16 to 4.54.0 #16 でも同じ失敗)。本 PR の変更とは無関係。tauri.ts は現状どこからも import されていないため、別途 @tauri-apps/plugin-os @tauri-apps/plugin-shell を devDependencies に追加するか、tauri.ts 自体を削除する対応を推奨。

マージ後の後始末

このブランチを main にマージすると、元の 5 件の Dependabot PR (#9, #12, #14, #15, #16) は Dependabot の次回スキャン時に自動でクローズされます。手動でクローズしたい場合は @dependabot close コメントで個別にクローズ可能です。

Summary by CodeRabbit

  • Chores

    • 依存関係とツールを最新バージョンに更新しました
    • 一部のTauri関連ユーティリティを削除しました
  • Refactor

    • チャート・リサイズ周りの型/内部インターフェースを整理しました(表示の安定性向上)
  • Bug Fixes

    • グラフのグリッドを左Y軸に明示的に紐づけ、表示位置の不整合を修正しました
  • Code Quality

    • React Hooks のルール検出を有効化し、フック利用の安全性を強化しました

Review Change Stack

dependabot Bot and others added 7 commits May 19, 2026 06:20
Bumps [date-fns](https://github.com/date-fns/date-fns) from 3.6.0 to 4.1.0.
- [Release notes](https://github.com/date-fns/date-fns/releases)
- [Changelog](https://github.com/date-fns/date-fns/blob/main/CHANGELOG.md)
- [Commits](date-fns/date-fns@v3.6.0...v4.1.0)

---
updated-dependencies:
- dependency-name: date-fns
  dependency-version: 4.1.0
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/HEAD/packages/eslint-plugin-react-hooks) from 5.2.0 to 7.0.1.
- [Release notes](https://github.com/facebook/react/releases)
- [Changelog](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/CHANGELOG.md)
- [Commits](https://github.com/facebook/react/commits/HEAD/packages/eslint-plugin-react-hooks)

---
updated-dependencies:
- dependency-name: eslint-plugin-react-hooks
  dependency-version: 7.0.1
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) from 2.1.9 to 4.0.15.
- [Release notes](https://github.com/bvaughn/react-resizable-panels/releases)
- [Changelog](https://github.com/bvaughn/react-resizable-panels/blob/main/CHANGELOG.md)
- [Commits](bvaughn/react-resizable-panels@2.1.9...4.0.15)

---
updated-dependencies:
- dependency-name: react-resizable-panels
  dependency-version: 4.0.15
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [recharts](https://github.com/recharts/recharts) from 2.15.4 to 3.6.0.
- [Release notes](https://github.com/recharts/recharts/releases)
- [Changelog](https://github.com/recharts/recharts/blob/main/CHANGELOG.md)
- [Commits](recharts/recharts@v2.15.4...v3.6.0)

---
updated-dependencies:
- dependency-name: recharts
  dependency-version: 3.6.0
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [wrangler](https://github.com/cloudflare/workers-sdk/tree/HEAD/packages/wrangler) from 3.114.16 to 4.54.0.
- [Release notes](https://github.com/cloudflare/workers-sdk/releases)
- [Commits](https://github.com/cloudflare/workers-sdk/commits/wrangler@4.54.0/packages/wrangler)

---
updated-dependencies:
- dependency-name: wrangler
  dependency-version: 4.54.0
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
- recharts v3: switch ChartTooltipContent props to TooltipContentProps and
  ChartLegendContent props to DefaultLegendContentProps; widen formatter
  call site to match new ValueType.
- react-resizable-panels v4: rename PanelGroup -> Group and
  PanelResizeHandle -> Separator in the resizable wrapper.
- eslint-plugin-react-hooks v7: pin to v5-era ruleset (rules-of-hooks +
  exhaustive-deps) instead of v7 recommended preset, to keep the lint
  baseline unchanged. Newly added strict rules can be enabled
  individually in a follow-up.

https://claude.ai/code/session_011xUm8nLQmyjMyis1vG1cmd
@qodo-code-review
Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 19, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 63104b7a-2afe-4eec-a36e-325166e8592d

📥 Commits

Reviewing files that changed from the base of the PR and between 721f509 and 103c1a8.

📒 Files selected for processing (1)
  • src/components/StatsScreen.tsx

📝 Walkthrough

Walkthrough

複数パッケージをアップグレードし(date-fns, react-resizable-panels, recharts, eslint-plugin-react-hooks, wrangler)、それに合わせて chart/resizable コンポーネントの型・実装を調整、StatsScreen の CartesianGrid に yAxisId を追加し、ESLint の React Hooks ルールを有効化しています。

Changes

パッケージ依存関係とコンポーネント型定義の更新

Layer / File(s) Summary
Package dependency version updates
package.json
date-fns^4.1.0 へ、react-resizable-panels^4.0.15 へ、recharts^3.6.0 へ、eslint-plugin-react-hooks^7.0.1 へ、wrangler^4.54.0 へそれぞれ更新しています。
Chart component type definitions and payload handling
src/components/ui/chart.tsx
ChartTooltipContent の props 型を Partial<RechartsPrimitive.TooltipContentProps<number,string>> に変更し、payload イテレーションで key を String(item.dataKey ?? index) に、formatter 呼び出しへは item.value を number キャスト、item.name を String 化して渡すように更新。ChartLegendContent の取得型を DefaultLegendContentProps に変更。
Resizable component type definitions
src/components/ui/resizable.tsx
ResizablePanelGroup の引数型を ResizablePrimitive.Group に、ResizableHandle の引数型を ResizablePrimitive.Separator にそれぞれ置換し、対応する JSX を整合。
StatsScreen grid alignment
src/components/StatsScreen.tsx
Overview と 日次トレンドの ComposedChart 内で CartesianGridyAxisId="left" を追加し属性を複数行に整形。
React Hooks ESLint rule configuration
eslint.config.mjs
react-hooks/rules-of-hooks を error、react-hooks/exhaustive-deps を warn として ESLint ルールに追加。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 依存を跳ねてぴょんと上がり、
型を合わせてすっと整えた、
グリッドは左に寄せて、
Hooks の律で秩序を保ち、
小さな庭がすっきりしたよ。

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed PRタイトルは5つの依存関係のバージョンアップとそれに伴う破壊的変更の修正という、PRの主要な目的を正確に反映している。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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 claude/merge-dependabot-prs-zIhAx

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

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request upgrades several major dependencies, including date-fns, recharts, react-resizable-panels, and wrangler, while also updating the ESLint configuration. Feedback indicates that the PR description should be updated to reflect the full scope of these changes rather than just the date-fns bump. Furthermore, the upgrade to react-resizable-panels v4 introduced breaking changes to data attributes in the resizable component that require updates to ensure correct styling in vertical layouts.

Comment thread package.json
"cmdk": "^1.1.1",
"d3": "^7.9.0",
"date-fns": "^3.6.0",
"date-fns": "^4.1.0",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

The pull request title and description are misleading. While they only mention bumping date-fns, this PR also includes major version upgrades for several other critical dependencies: recharts (v2 to v3), react-resizable-panels (v2 to v4), eslint-plugin-react-hooks (v5 to v7), and wrangler (v3 to v4).

Mixing multiple major upgrades in a single PR makes it difficult to track breaking changes and increases the risk of regressions. It is recommended to update the PR title and description to reflect all major changes, or ideally, split these into separate pull requests to ensure each upgrade is properly validated.

<ResizablePrimitive.PanelGroup
<ResizablePrimitive.Group
data-slot="resizable-panel-group"
className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

The upgrade to react-resizable-panels v4 introduced breaking changes to data attributes. The data-panel-group-direction attribute has been renamed to data-group-direction. The current Tailwind selector will fail to apply the flex-col class when the direction is vertical.

Suggested change
className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
className={cn('flex h-full w-full data-[group-direction=vertical]:flex-col', className)}

<ResizablePrimitive.Separator
data-slot="resizable-handle"
className={cn(
'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

Similar to the ResizablePanelGroup, the Separator (formerly PanelResizeHandle) now uses data-group-direction instead of data-panel-group-direction in version 4. All occurrences in the className string need to be updated to ensure the handle is styled correctly in vertical layouts.

Suggested change
'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[group-direction=vertical]:h-px data-[group-direction=vertical]:w-full data-[group-direction=vertical]:after:left-0 data-[group-direction=vertical]:after:h-1 data-[group-direction=vertical]:after:w-full data-[group-direction=vertical]:after:-translate-y-1/2 data-[group-direction=vertical]:after:translate-x-0 [&[data-group-direction=vertical]>div]:rotate-90',

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1c6caa7d7e

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

}) {
return (
<ResizablePrimitive.PanelResizeHandle
<ResizablePrimitive.Separator
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Preserve vertical separator styling after v4 rename

When this wrapper is used with a vertical group, the v4 Separator/Group components no longer emit the old data-panel-group-direction=vertical attribute; v4 exposes orientation via ARIA/data attributes instead. The class list immediately below still keys all vertical sizing/rotation off that old attribute, so vertical separators keep the horizontal w-px sizing and the grip does not rotate. Please migrate these selectors to the v4 attributes (or otherwise pass your own orientation state) along with the component rename.

Useful? React with 👍 / 👎.

@otomatty otomatty changed the title chore(deps): bump date-fns from 3.6.0 to 4.1.0 chore(deps): bump 5 dependencies (date-fns, eslint-plugin-react-hooks, react-resizable-panels, recharts, wrangler) and fix breaking changes May 19, 2026
This module exported isTauri / getPlatform / invokeTauriCommand /
openExternal, but none of them are imported anywhere in the codebase
(vite.config.ts has its own local isTauri based on TAURI_ENV_PLATFORM).
The dynamic imports of @tauri-apps/plugin-os and @tauri-apps/plugin-shell
also referenced packages not listed in package.json, causing the CI
Type Check job to fail. Removing this dead module makes tsc -b green.

https://claude.ai/code/session_011xUm8nLQmyjMyis1vG1cmd
@cloudflare-workers-and-pages
Copy link
Copy Markdown
Contributor

cloudflare-workers-and-pages Bot commented May 19, 2026

Deploying typeflow with  Cloudflare Pages  Cloudflare Pages

Latest commit: 103c1a8
Status: ✅  Deploy successful!
Preview URL: https://bddd1255.typeflow-4n3.pages.dev
Branch Preview URL: https://claude-merge-dependabot-prs.typeflow-4n3.pages.dev

View logs

Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 721f5095cb

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread package.json
"react-resizable-panels": "^2.1.7",
"recharts": "^2.15.1",
"react-resizable-panels": "^4.0.15",
"recharts": "^3.6.0",
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Set CartesianGrid axis ids before upgrading Recharts

With this Recharts 3 upgrade, the stats charts that define YAxis yAxisId="left"/"right" but leave CartesianGrid without a matching yAxisId (src/components/StatsScreen.tsx lines 504/508 and 892/899) lose their horizontal grid lines: Recharts 3 now matches grid lines to the explicit x/yAxisId instead of implicitly choosing the first axis, and grids with a non-default axis id no longer render unless the id is provided. Please update those grids (for example yAxisId="left") as part of the dependency bump.

Useful? React with 👍 / 👎.

Recharts 3 no longer implicitly matches CartesianGrid to the first
y-axis when multiple yAxisIds are defined; an explicit yAxisId is now
required, otherwise the horizontal grid lines disappear. Both
StatsScreen charts that use yAxisId="left"/"right" were affected.
Reported by Codex review on PR #17.

https://claude.ai/code/session_011xUm8nLQmyjMyis1vG1cmd
@otomatty otomatty merged commit 9e7fc82 into main May 19, 2026
7 checks passed
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.

2 participants