feat: ボトルを登録する（US-2） - #33
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds shared Zod validation, Shadcn-based UI primitives, a bottle registration form, an authenticated POST API with tests, and database-backed bottle listing with registration navigation. ChangesBottle registration
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
actor User
participant BottleForm
participant BottlesAPI
participant Database
User->>BottleForm: submit bottle fields
BottleForm->>BottlesAPI: POST JSON payload
BottlesAPI->>Database: create session-owned bottle
Database-->>BottlesAPI: created bottle
BottlesAPI-->>BottleForm: 201 response
BottleForm-->>User: navigate to bottles list
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 1
🤖 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/components/ui/checkbox.tsx`:
- Around line 16-18: Replace the checkbox data-checked variants in
src/components/ui/checkbox.tsx lines 16-18 with data-[state=checked] variants.
Also update the select variants in src/components/ui/select.tsx lines 72-76 from
data-open/data-closed to data-[state=open]/data-[state=closed], and the
separator variants in src/components/ui/separator.tsx lines 19-22 from
data-horizontal/data-vertical to
data-[orientation=horizontal]/data-[orientation=vertical].
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1862f60e-288c-475f-be42-6b0124a0e1b1
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
components.jsonpackage.jsonsrc/app/api/bottles/route.test.tssrc/app/api/bottles/route.tssrc/app/bottles/new/bottle-form.tsxsrc/app/bottles/new/page.tsxsrc/app/bottles/page.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/components/ui/button.tsxsrc/components/ui/checkbox.tsxsrc/components/ui/field.tsxsrc/components/ui/input.tsxsrc/components/ui/label.tsxsrc/components/ui/select.tsxsrc/components/ui/separator.tsxsrc/components/ui/textarea.tsxsrc/lib/schemas/bottle.test.tssrc/lib/schemas/bottle.tssrc/lib/utils.tsvitest.config.ts
Comment on lines
+16
to
+18
| className={cn( | ||
| "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", | ||
| className, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## relevant files\n'
git ls-files 'src/components/ui/*' 'tailwind.config.*' 'postcss.config.*' 'src/**/tailwind*' 'src/**/theme*' 'src/**/styles*' | sed 's#^`#-` #'
printf '\n## search for these variants and any custom variant plugins\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
'data-(checked|open|closed|horizontal|vertical)|data-\[state=|data-\[orientation=|addVariant|matchVariant|tailwindcss-radix|radix' \
.
printf '\n## inspect the three target files\n'
sed -n '1,220p' src/components/ui/checkbox.tsx
printf '\n---\n'
sed -n '1,220p' src/components/ui/select.tsx
printf '\n---\n'
sed -n '1,220p' src/components/ui/separator.tsx
printf '\n## inspect tailwind config if present\n'
for f in tailwind.config.js tailwind.config.cjs tailwind.config.ts postcss.config.js postcss.config.cjs postcss.config.ts; do
if [ -f "$f" ]; then
echo "--- $f ---"
sed -n '1,260p' "$f"
fi
doneRepository: hduehgw0/mycellar
Length of output: 50373
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## postcss config\n'
sed -n '1,220p' postcss.config.mjs
printf '\n## search for custom variant definitions\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
'`@custom-variant`|custom-variant|theme\\(|`@theme`|`@plugin`|variant\\(|data-open|data-closed|data-checked|data-horizontal|data-vertical' \
src .
printf '\n## inspect field.tsx because it uses related variant syntax\n'
sed -n '1,220p' src/components/ui/field.tsxRepository: hduehgw0/mycellar
Length of output: 556
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n## search for custom Tailwind variant definitions\n'
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
'`@custom-variant`|`@theme`|`@plugin`|matchVariant|addVariant|data-checked|data-open|data-closed|data-horizontal|data-vertical|has-data-checked|group-has-data-horizontal' \
.
printf '\n## inspect src/components/ui/field.tsx\n'
sed -n '1,220p' src/components/ui/field.tsx
printf '\n## inspect any global CSS files likely to hold Tailwind variants\n'
git ls-files '*.css' '*.scss' '*.mjs' '*.ts' | rg '(^|/)(globals|global|index|app|theme|tailwind|postcss)\.(css|scss|mjs|ts)$'Repository: hduehgw0/mycellar
Length of output: 8371
🌐 Web query:
Tailwind CSS data-open variant data-checked selector Radix data-state data-orientation official docs
💡 Result:
Tailwind CSS provides built-in, first-class support for styling elements based on data attributes, making it the recommended and modern way to integrate with Radix UI states (such as data-state, data-orientation, and others) [1][2]. Using Data Attribute Selectors You can target any data attribute directly in your HTML using arbitrary variants [1][3]. This approach requires no external plugins: // Basic data attribute selector
...
// Multiple attributes ...
// Group and Peer variants ...
...
Radix UI Integration Radix UI components automatically expose their state via data attributes (e.g., data-state="open", data-orientation="vertical") [4][5]. Because Tailwind CSS natively supports these attribute selectors, you do not need third-party plugins like tailwindcss-radix to achieve full styling control [2]. Using arbitrary variants or configured data shortcuts is considered the idiomatic approach for current Tailwind development [2]. Top results: [1][3][4][5][2]
Citations:
- 1: Add dynamic
data-*variant tailwindlabs/tailwindcss#9559 - 2: How do I use Radix with Tailwindcss? radix-ui/primitives#1000
- 3: https://www.components.build/data-attributes
- 4: https://www.radix-ui.com/primitives/docs/guides/styling
- 5: https://radix-ui-primitives.mintlify.app/concepts/customization
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "## src/app/globals.css"
cat -n src/app/globals.css
echo
echo "## any theme data aliases in the repo"
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' \
'data-(open|closed|checked|horizontal|vertical)|--data-|theme inline|`@custom-variant`' \
src/app/globals.css src .Repository: hduehgw0/mycellar
Length of output: 9838
🌐 Web query:
Tailwind CSS data-open data-checked data-horizontal built-in shortcut docs v4
💡 Result:
In Tailwind CSS v4, styling based on data attributes is primarily achieved using the built-in data-* variant [1][2]. There are no pre-built, hard-coded shortcuts for attributes like data-open, data-checked, or data-horizontal that work automatically out-of-the-box without configuration [1][3]. Instead, Tailwind v4 provides a flexible data-* variant that allows you to target any data attribute dynamically [1][2]. How to use data attributes in v4: 1. Direct Usage (Arbitrary Values): You can target any data attribute directly in your HTML using the syntax data-[key=value]: [1][2]. For example, to style an element when data-state="open" is present:
...
2. Boolean Attributes: If your attribute is a simple boolean (e.g., data-checked), you can often target it by just providing the key: ...
3. Custom Shortcuts: If you want to use shorthand like data-open: instead of data-[state=open]:, you can define custom variants in your CSS file using the @custom-variant directive [1][4]. This is the recommended way to create the "shortcuts" you are looking for [1][5]. Example CSS configuration: @import "tailwindcss"; @custom-variant data-open (&[data-state="open"]); @custom-variant data-checked (&[data-ui~="checked"]); @custom-variant data-horizontal (&[data-orientation="horizontal"]); Once defined in your CSS, you can use these shortcuts directly in your HTML classes: ...
This approach replaces the need for the theme.extend.data configuration found in older versions of Tailwind, aligning with the CSS-first configuration philosophy of v4 [6][3].
Citations:
- 1: https://tailwindcss.com/docs/hover-focus-and-other-states
- 2: https://llmbestpractices.com/frontend/tailwind-variants
- 3: https://v3.tailwindcss.com/docs/v4-beta
- 4: Migrate
datatheme keys tailwindlabs/tailwindcss#18816 - 5: https://stevekinney.com/courses/tailwind/data-attribute-variants
- 6: https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0
Use arbitrary data variants for these states
src/components/ui/checkbox.tsx#L16-L18: replacedata-checked:*withdata-[state=checked]:*.src/components/ui/select.tsx#L72-L76: replacedata-open:*/data-closed:*withdata-[state=open]:*/data-[state=closed]:*.src/components/ui/separator.tsx#L19-L22: replacedata-horizontal:*/data-vertical:*withdata-[orientation=horizontal]:*/data-[orientation=vertical]:*.
📍 Affects 3 files
src/components/ui/checkbox.tsx#L16-L18(this comment)src/components/ui/select.tsx#L72-L76src/components/ui/separator.tsx#L19-L22
🤖 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/ui/checkbox.tsx` around lines 16 - 18, Replace the checkbox
data-checked variants in src/components/ui/checkbox.tsx lines 16-18 with
data-[state=checked] variants. Also update the select variants in
src/components/ui/select.tsx lines 72-76 from data-open/data-closed to
data-[state=open]/data-[state=closed], and the separator variants in
src/components/ui/separator.tsx lines 19-22 from data-horizontal/data-vertical
to data-[orientation=horizontal]/data-[orientation=vertical].
This was referenced Jul 19, 2026
Merged
Merged
10 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
関連 issue
resolve #25
やったこと
概要
ボトル登録フォームと作成 API を実装した。最初の書き込み処理として、CRUD 共通のパターン（zod スキーマ共有・Route Handler での再検証＋認可）をここで確立した。
変更点
src/lib/schemas/bottle.ts：共有 zod スキーマ（銘柄名のみ必須・国は固定リストREGIONS・空文字→未入力の正規化・本数は既定 1）＋単体テストPOST /api/bottles：セッション確認 → 共有スキーマで再検証 →userIdはセッションから付与して保存（ボディのuserIdは無視）＋結合テスト/bottles/new：登録フォーム（react-hook-form ＋ zodResolver、エラーはrole="alert"表示、送信中は無効化）/bottles：登録導線と反映確認用の最小表示（一覧の本実装は feat: ボトル一覧を表示する（US-3） #26）vitest.config.tsに@エイリアス解決を追加受け入れ条件（セルフチェック）
動作確認
pnpm lintが通るpnpm testが通る（17 本：スキーマ単体＋Route Handler 結合）pnpm buildが通るIssue 要件外の対応（あれば）
BottleInput/BottleData）を削除（利用側はスキーマから型推論）備考
REGIONSの中身は父と確定するまでの暫定（5 大ウイスキー＋主要新興産地。→ docs/data-model.md の TODO）!response.okで一律表示。エラー形状の統一は書き込みルートが出揃う feat: ボトルを編集する（US-5） #28・feat: ボトルを削除する（US-6） #29 で再評価）Summary by CodeRabbit
New Features
Bug Fixes
Tests