Packages aktualisiert#568
Conversation
WalkthroughDiese PR umfasst mehrere unabhängige Änderungen: Aktualisierung der PhpStorm-Meta- und IDE-Helper-Dateien, reine Whitespace-Neuformatierung diverser Sprachdateien (de/en), Anhebung von npm-Paketversionen sowie UI-Änderungen mit einer neuen Switch-Komponente, erweitertem FormGrid und angepasstem ZUGFeRD-Einstellungsformular. ChangesIDE-Meta und Helper Updates
Sprachdatei-Formatierung
Dependency-Updates
UI-Komponenten: FormGrid, Switch und ZugferdSettingEdit
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 PHPStan (2.2.2)PHPStan was skipped because the config uses disallowed 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: 2
🤖 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 `@resources/js/Components/twc-ui/form-grid.tsx`:
- Around line 50-53: The divider styling in the `twc-ui/form-grid` component
uses `border/50`, which is not a valid Tailwind border color opacity usage for
this case. Update the conditional class logic in the `cn(...)` call inside the
form grid component so the top border uses a real border color utility with
opacity, such as a `border-t` variant paired with `border-border/50` or
`border-t-border/50`, while keeping the existing layout classes intact.
In `@resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx`:
- Around line 63-77: The ZUGFeRD Switch is only using an initial default state,
so changes are not bound to the form data and won’t be saved; update the Switch
in ZugferdSettingEdit to use the form’s boolean field for is_enabled instead of
defaultSelected. Wire it the same way as the other inputs in this component,
either through the form binding helpers such as
form.registerCheckbox('is_enabled') or by controlling it with
isSelected/onChange, so the switch stays in sync with the submitted form state.
🪄 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: 1af3f2e4-ce3e-4290-bc16-0b938a5c4b2f
⛔ Files ignored due to path filters (2)
composer.lockis excluded by!**/*.lockpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
.phpstorm.meta.php_ide_helper.phplang/de/auth.phplang/de/http-statuses.phplang/de/pagination.phplang/de/passwords.phplang/de/validation.phplang/en/auth.phplang/en/http-statuses.phplang/en/pagination.phplang/en/passwords.phplang/en/validation.phppackage.jsonresources/js/Components/twc-ui/form-grid.tsxresources/js/Components/twc-ui/switch.tsxresources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx
| <div | ||
| className={cn( | ||
| 'mb-1 flex-1 px-4 last:mb-3', | ||
| border ? 'mx-0 border-accent border-t pt-4' : '', | ||
| 'flex-1 px-4 pt-4 last:mb-3', | ||
| border ? 'border/50 mx-0 mt-4 mb-4 border-t' : '', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
Does Tailwind CSS v4 support an opacity modifier like border/50 on the bare border width utility, or only on color utilities?
💡 Result:
In Tailwind CSS v4, the opacity modifier syntax (e.g., /50) is designed specifically for color utilities, not width utilities [1][2]. Consequently, you cannot use an opacity modifier on the bare border width utility (e.g., border/50 is not a valid utility) [3]. The opacity modifier works by adjusting the alpha channel of a color using the CSS color-mix function [2][4]. Because border width utilities define the thickness of a border rather than its color, they do not support this modifier [3][5]. To control border opacity in Tailwind CSS v4, you apply the modifier to the border color utility instead [6][2]. For example, if you want a border with 50% opacity, you would use both a width utility and a color utility with the modifier:
Citations:
- 1: https://tailwindcss.com/docs/colors
- 2: https://learn.bemorex.com/en/cursos/tailwind-css-v4/colors-and-theming
- 3: https://tailwindcss.com/docs/border-width
- 4: https://tailwindcss.com/blog/tailwindcss-v4
- 5: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/border-width.mdx
- 6: https://tailwindcss.com/docs/upgrade-guide
- 7: https://toolsox.com/tailwind-css-tools-online/tailwind-css-v4-cheat-sheet-updated
- 8: https://stackoverflow.com/questions/79705011/the-bg-opacity-utility-no-longer-exists-as-of-v4-how-could-it-still-be-creat
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== File snippet =="
sed -n '1,120p' resources/js/Components/twc-ui/form-grid.tsx
echo
echo "== Tailwind/config files =="
git ls-files | rg '(^|/)(tailwind|postcss|vite|resources/js|resources/css).*(config|css|ts|js)$' || true
echo
echo "== Search for border/50 and related border color patterns =="
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'border/50|border-t/50|border-[a-z0-9-]+/50|border-t\b|border\b' resources/js resources/css . --glob '!*.map' || true
echo
echo "== Search for Tailwind customizations mentioning border opacity =="
rg -n --hidden --glob '!node_modules' --glob '!dist' --glob '!build' 'borderOpacity|opacity.*border|border.*opacity|theme\(|tailwindcss' . --glob '!*.map' || trueRepository: dspangenberg/opsc
Length of output: 50374
border/50 durch eine echte Border-Farbklasse ersetzen.
Tailwind wertet border/50 hier nicht als sinnvollen Opacity-Modifier aus. Wenn nur der obere Trenner halbtransparent sein soll, passt z. B. border-t border-border/50 (oder border-t-border/50).
🤖 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 `@resources/js/Components/twc-ui/form-grid.tsx` around lines 50 - 53, The
divider styling in the `twc-ui/form-grid` component uses `border/50`, which is
not a valid Tailwind border color opacity usage for this case. Update the
conditional class logic in the `cn(...)` call inside the form grid component so
the top border uses a real border color utility with opacity, such as a
`border-t` variant paired with `border-border/50` or `border-t-border/50`, while
keeping the existing layout classes intact.
| <div className="flex-none"> | ||
| <Switch | ||
| id="enabled" | ||
| defaultSelected={settings.is_enabled as boolean} | ||
| isDisabled={ | ||
| !( | ||
| form.data.seller_contact_id || | ||
| form.data.seller_contact_person_id || | ||
| form.data.seller_contact_address_id | ||
| ) as boolean | ||
| } | ||
| > | ||
| ZUGFeRD aktivieren | ||
| </Switch> | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Suche nach der useForm-Implementierung, um register/setData API für boolesche Felder zu prüfen
fd -e ts -e tsx 'form' resources/js/Components/twc-ui --exec grep -l 'useForm' {} \;Repository: dspangenberg/opsc
Length of output: 921
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== form.tsx outline =="
ast-grep outline resources/js/Components/twc-ui/form.tsx --view expanded || true
echo
echo "== target file outline =="
ast-grep outline resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx --view expanded || true
echo
echo "== relevant excerpts from form.tsx =="
grep -nE 'useForm|register|setData|defaultSelected|isSelected|onChange|Switch|checkbox|boolean' -n resources/js/Components/twc-ui/form.tsx || true
echo
echo "== relevant excerpts from target file =="
grep -nE 'Switch|register\(|setData\(|is_enabled|seller_contact' resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx || true
echo
echo "== nearby target lines =="
sed -n '50,90p' resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsxRepository: dspangenberg/opsc
Length of output: 4841
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== switch component outline =="
ast-grep outline resources/js/Components/twc-ui/switch.tsx --view expanded || true
echo
echo "== use-twc-ui-form references =="
ast-grep outline resources/js/Hooks/use-twc-ui-form.ts --view expanded || true
echo
echo "== switch.tsx excerpt =="
cat -n resources/js/Components/twc-ui/switch.tsx | sed -n '1,220p'
echo
echo "== use-twc-ui-form.ts excerpt =="
cat -n resources/js/Hooks/use-twc-ui-form.ts | sed -n '1,260p'Repository: dspangenberg/opsc
Length of output: 13414
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== target file: initialization and submit =="
grep -nE 'useForm\(|form\.post|form\.put|form\.patch|form\.submit|is_enabled|setData|registerCheckbox|onSubmit|<Form ' resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx || true
echo
echo "== broader context around initialization =="
sed -n '1,70p' resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx
echo
echo "== form component submission behavior =="
grep -nE 'onSubmit|form\.data|request|transform|submit|handleSubmit|setData' resources/js/Components/twc-ui/form.tsx || true
sed -n '70,160p' resources/js/Components/twc-ui/form.tsxRepository: dspangenberg/opsc
Length of output: 5881
Switch an form.data.is_enabled binden
defaultSelected macht den Schalter nur initial sichtbar; ohne isSelected/onChange oder form.registerCheckbox('is_enabled') bleibt die Änderung außerhalb des Formularzustands und wird nicht mitgespeichert. Hier sollte die boolesche Feldbindung wie bei den anderen Eingaben verwendet werden.
🤖 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 `@resources/js/Pages/App/Setting/ZugferdSetting/ZugferdSettingEdit.tsx` around
lines 63 - 77, The ZUGFeRD Switch is only using an initial default state, so
changes are not bound to the form data and won’t be saved; update the Switch in
ZugferdSettingEdit to use the form’s boolean field for is_enabled instead of
defaultSelected. Wire it the same way as the other inputs in this component,
either through the form binding helpers such as
form.registerCheckbox('is_enabled') or by controlling it with
isSelected/onChange, so the switch stays in sync with the submitted form state.
1 participant
Summary by CodeRabbit
New Features
Verbesserungen
Bug Fixes