feat(ui): デザインシステム基盤とDesign Labを追加 - #648
Conversation
|
Warning Review limit reached
Next review available in: 49 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughデザインシステム文書と検証スクリプトを追加し、 Changesデザインシステムとデザインラボ
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant RootComponent
participant DesignLabRoute
participant DesignConceptScreen
Browser->>RootComponent: /design-labを表示
RootComponent->>RootComponent: pathnameを確認
RootComponent->>DesignLabRoute: AppShellなしでOutletを表示
DesignLabRoute->>DesignConceptScreen: デザインラボを返す
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
packages/ui/src/screens/design-concept-screen.tsx (2)
2681-2700: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win型キャストではなく型ガードで絞り込んでください。
area() as Exclude<...>はManagerAreaに新しい値を追加したときに型チェックをすり抜け、ManagerBatchToolPanelのcontent()がundefinedを返して L2349 のcontent().titleが実行時エラーになります。バッチツール用の型ガードを用意すれば、キャストなしで網羅性がコンパイル時に担保されます。コーディングガイドラインの「アプリケーション本体コードでは型のごまかしを禁止する。型ガードを優先」にも沿います。
♻️ 提案するリファクタ
L2294 付近に追加:
type ManagerBatchArea = Extract<ManagerArea, "duplicates" | "tagging" | "vectors">; function isManagerBatchArea(area: ManagerArea): area is ManagerBatchArea { return area === "tagging" || area === "vectors" || area === "duplicates"; }呼び出し側:
<Show fallback={ - <Show - fallback={ - <ManagerBatchToolPanel - area={ - area() as Exclude< - ManagerArea, - "characters" | "ips" | "projects" | "transfer" - > - } - /> - } - when={area() === "transfer"} - > - <DataTransferToolPanel /> - </Show> + <Show fallback={<DataTransferToolPanel />} when={isManagerBatchArea(area())}> + {/* Show は when の真値を渡すため、型ガード済みの値を受け取る */} + <ManagerBatchToolPanel area={area() as ManagerBatchArea} /> + </Show> } when={isManagerEntityArea(area())} >キャストを完全に排除するなら、
Show when={...}の代わりにSwitch/Matchと型ガードを組み合わせ、ManagerBatchToolPanelのprops.areaをManagerArea受け取り + 内部でdefaultを持つ形にする方法もあります。🤖 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 `@packages/ui/src/screens/design-concept-screen.tsx` around lines 2681 - 2700, Replace the `area() as Exclude<...>` cast passed to `ManagerBatchToolPanel` with an `isManagerBatchArea` type guard and a corresponding `ManagerBatchArea` type derived from `ManagerArea`. Use the guard in the rendering branch so `ManagerBatchToolPanel` receives only valid batch areas, preserving compile-time exhaustiveness when `ManagerArea` gains new values.Source: Coding guidelines
4291-4315: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win7段のネスト三項をビューマップへ切り出すと読みやすくなります。
ビュー追加のたびにネストが深くなります。
Switch/Match、またはビュー→コンポーネントのマップで置き換える方が保守しやすいです。♻️ 提案するリファクタの方向性
+import { Match, Switch } from "solid-js";- <Show - fallback={ - activeView() === "detail" ? ( - <DesignMediaDetailScreen ... /> - ) : activeView() === "overlays" ? ( - ... - ) : ( - <InteractionPatternsScreen /> - ) - } - when={activeView() === "library"} - > + <Switch fallback={<InteractionPatternsScreen />}> + <Match when={activeView() === "detail"}> + <DesignMediaDetailScreen + media={selectedMedia()} + onBack={() => setActiveView("library")} + onNext={() => selectAdjacentMedia(1)} + onPrevious={() => selectAdjacentMedia(-1)} + /> + </Match> + <Match when={activeView() === "overlays"}> + <OverlayPatternsScreen onOpenJobs={() => setActiveView("jobs")} /> + </Match> + <Match when={activeView() === "layouts"}><ScreenLayoutsScreen /></Match> + <Match when={activeView() === "manager"}><DesignManagerScreen /></Match> + <Match when={activeView() === "jobs"}><JobsScreen /></Match> + <Match when={activeView() === "settings"}><SettingsScreen /></Match> + <Match when={activeView() === "library"}>{/* library + inspector */}</Match> + </Switch>
libraryはインスペクターと2要素を返すため、Match内でフラグメントにまとめる調整が必要です。🤖 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 `@packages/ui/src/screens/design-concept-screen.tsx` around lines 4291 - 4315, Replace the nested activeView() ternary chain in the Show fallback with a Switch/Match-based view selection or an equivalent view-to-component map. Preserve each existing view mapping and callbacks, and ensure the library case remains grouped as a fragment containing the inspector and its two elements.
🤖 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 `@apps/server/src/routes/__root.tsx`:
- Around line 56-59: Update the Show condition in the root route around
DesignConceptScreen so any pathname beginning with "/design-lab" uses the
design-lab full-screen path, including trailing slashes and nested routes, while
preserving the AppShell/Outlet fallback for all other paths.
In `@packages/ui/src/screens/design-concept-screen.tsx`:
- Around line 3133-3148: Update the Show condition around the Cancel job button
so it is displayed only when selectedJob().status is running or queued; keep the
Retry job button for failed jobs and ensure completed jobs display neither
action.
- Around line 631-645: Update the navigation button’s aria-label in the
component containing props.active, props.label, and props.badge so it includes
the badge count when props.badge is present, including the collapsed state.
Preserve the existing label unchanged when no badge exists, and keep the visual
badge rendering intact.
---
Nitpick comments:
In `@packages/ui/src/screens/design-concept-screen.tsx`:
- Around line 2681-2700: Replace the `area() as Exclude<...>` cast passed to
`ManagerBatchToolPanel` with an `isManagerBatchArea` type guard and a
corresponding `ManagerBatchArea` type derived from `ManagerArea`. Use the guard
in the rendering branch so `ManagerBatchToolPanel` receives only valid batch
areas, preserving compile-time exhaustiveness when `ManagerArea` gains new
values.
- Around line 4291-4315: Replace the nested activeView() ternary chain in the
Show fallback with a Switch/Match-based view selection or an equivalent
view-to-component map. Preserve each existing view mapping and callbacks, and
ensure the library case remains grouped as a fragment containing the inspector
and its two elements.
🪄 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 Plus
Run ID: fe1015c2-b237-4ce5-8864-a916e8582174
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (9)
AGENTS.mdDESIGN.mdapps/server/src/routes/__root.tsxapps/server/src/routes/design-lab.tsxpackage.jsonpackages/ui/src/alert-dialog.tsxpackages/ui/src/dialog.tsxpackages/ui/src/screens/design-concept-screen.tsxpackages/ui/src/toast.tsx
1 participant
概要
既存UIを整理するための実動プロトタイプを /design-lab に追加し、今回合意したデザイン骨子を公式design.md形式の DESIGN.md として固定します。
変更内容
技術詳細
DESIGN.mdは機械可読tokenと人向けの設計理由を併記し、公式lintでerrors 0・warnings 0です。実画面移植時はDESIGN.mdを規範、/design-labを挙動の参照実装、Solid UIを共有primitive基盤として扱います。
検証
Summary by CodeRabbit
新機能
/design-labにデザインシステムの参照画面を追加しました。改善
ドキュメント