Conversation
|
The preview deployment for frontend-testownik-dev is ready. 🟢 Open Preview | Open Build Logs | Open Application Logs Last updated at: 2026-04-05 22:30:35 CET |
There was a problem hiding this comment.
Pull request overview
Migracja warstwy UI z RadixUI na Base UI oraz dostosowanie stylów/komponentów do nowego designu (Tailwind + tokeny w globals.css) w całej aplikacji.
Changes:
- Zastąpienie komponentów shadcn/Radix odpowiednikami Base UI (tooltip/dialog/select/menu/tabs itd.) i aktualizacja API komponentów (
asChild→render, nowe nazwy propsów). - Aktualizacja design tokens (OKLCH) i klas Tailwinda pod nowy wygląd (tła, gradienty, border/ring, CTA).
- Refaktory miejsc użycia komponentów UI w feature’ach (quiz/profile/navbar/pages) pod nowe API.
Reviewed changes
Copilot reviewed 76 out of 77 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/use-mobile.ts | Dodaje hook do wykrywania mobile breakpointu. |
| src/components/ui/tooltip.tsx | Migracja Tooltip na Base UI + zmiana API (delay/positioner/popup). |
| src/components/ui/toggle.tsx | Migracja Toggle na Base UI i domyślne variant/size. |
| src/components/ui/textarea.tsx | Korekty klas (border/bg/ring) pod nowy design. |
| src/components/ui/tabs.tsx | Migracja Tabs na Base UI + warianty listy. |
| src/components/ui/table.tsx | Dodaje warianty tabeli (cva) i wrapper dla wersji border. |
| src/components/ui/switch.tsx | Migracja Switch na Base UI + nowe klasy i size data-attr. |
| src/components/ui/sonner.tsx | Dodaje toastOptions.classNames dla toastów. |
| src/components/ui/slider.tsx | Migracja Slider na Base UI (Control/Track/Indicator) + logika thumbs. |
| src/components/ui/select.tsx | Migracja Select na Base UI (Positioner/Popup/List) + nowe propsy pozycjonowania. |
| src/components/ui/scroll-area.tsx | Migracja ScrollArea na Base UI (Scrollbar/Thumb). |
| src/components/ui/radio-group.tsx | Migracja RadioGroup na Base UI (Radio + RadioGroup). |
| src/components/ui/progress.tsx | Migracja Progress na Base UI + rozbicie na Track/Indicator/Label/Value. |
| src/components/ui/popover.tsx | Migracja Popover na Base UI (Positioner/Popup) + nowe subkomponenty (Header/Title/Description). |
| src/components/ui/navigation-menu.tsx | Migracja NavigationMenu na Base UI + własny Positioner/Viewport. |
| src/components/ui/label.tsx | Zamiana Radix Label na natywny <label>. |
| src/components/ui/input.tsx | Migracja Input na Base UI (InputPrimitive). |
| src/components/ui/input-otp.tsx | Ustawia spellCheck={false} i dodaje "use client". |
| src/components/ui/input-group.tsx | Aktualizacja stylów i typów + "use client". |
| src/components/ui/hover-card.tsx | Migracja HoverCard na Base UI PreviewCard. |
| src/components/ui/dropdown-menu.tsx | Migracja DropdownMenu na Base UI Menu (Popup/Positioner) i uproszczenie API. |
| src/components/ui/dialog.tsx | Migracja Dialog na Base UI + Close przez render={<Button/>} + opcjonalny close w footerze. |
| src/components/ui/checkbox.tsx | Migracja Checkbox na Base UI + zmiana ikon i klas. |
| src/components/ui/card.tsx | Dodaje warianty Card (np. gradient) przez cva. |
| src/components/ui/button.tsx | Migracja Button na Base UI; asChild zastąpione przez render/nativeButton. |
| src/components/ui/badge.tsx | Badge przechodzi na Base UI useRender/mergeProps. |
| src/components/ui/avatar.tsx | Migracja Avatar na Base UI + size data-attr + zmiany propsów fallback. |
| src/components/ui/aspect-ratio.tsx | Zamiana Radix AspectRatio na div z CSS variable --ratio. |
| src/components/ui/alert-dialog.tsx | Migracja AlertDialog na Base UI + dostosowanie Action/Cancel do Button. |
| src/components/ui/accordion.tsx | Migracja Accordion na Base UI + nowe animacje data-open/data-closed. |
| src/components/report-bug-dialog.tsx | Dostosowanie Select (items/SelectGroup) + render dla DialogClose. |
| src/components/quiz/share-quiz-dialog/share-quiz-dialog.tsx | Aktualizacja PopoverTrigger/DialogClose + typowanie checked. |
| src/components/quiz/share-quiz-dialog/search-results-popover.tsx | Usuwa onOpenAutoFocus, aktualizuje delayMs → delay. |
| src/components/quiz/share-quiz-dialog/access-list.tsx | TooltipProvider delay + TooltipTrigger render + delayMs → delay. |
| src/components/quiz/report-question-issue-dialog.tsx | Zmiany DialogTrigger/DialogClose pod Base UI API. |
| src/components/quiz/quiz-sort.tsx | TooltipTrigger/DropdownMenuTrigger przechodzą na render. |
| src/components/quiz/quiz-preview-dialog.tsx | Linki w Button przez nativeButton={false} + render. |
| src/components/quiz/quiz-info-card.tsx | TooltipTrigger przechodzą na render. |
| src/components/quiz/quiz-history-dialog.tsx | Upraszcza ScrollArea/Accordion usage + DialogClose render. |
| src/components/quiz/quiz-editor.tsx | Checkbox indeterminate + typowanie checked + uproszczenie Button. |
| src/components/quiz/quiz-card.tsx | Link w Button przez render; TooltipTrigger render. |
| src/components/quiz/quiz-action-buttons.tsx | TooltipTrigger render + zmiana UI akcji maintainer/history. |
| src/components/quiz/question-card.tsx | Korekty klas odpowiedzi + TooltipTrigger render. |
| src/components/quiz/hooks/quiz-runtime-reducer.ts | Formatowanie settings w initial state. |
| src/components/quiz/helpers/question-card.ts | Zmiany klas wariantów odpowiedzi (kolory/stany). |
| src/components/quiz/editor/question-form.tsx | HoverCard/TooltipTrigger przechodzą na render; checkbox checked typowanie. |
| src/components/quiz/editor/image/image-dialog.tsx | Korekty TabsList klas pod nowy design. |
| src/components/quiz/editor/image/image-button.tsx | Zmiana wariantu Button przy hasImage. |
| src/components/quiz/editor/answer-form.tsx | TooltipTrigger render (przycisk correct + ImageButton). |
| src/components/quiz/continuity-dialog.tsx | DialogTrigger/DialogClose przechodzą na render. |
| src/components/profile/settings-form.tsx | Aktualizacja Slider API (value jako number) + onValueCommitted. |
| src/components/profile/profile-details.tsx | delayMs → delay w AvatarFallback. |
| src/components/navbar/navbar-client.tsx | Przenosi LogoutButton poza AuthButtons + reorg akcji. |
| src/components/navbar/nav-links.tsx | NavigationMenuLink przechodzi na render; UI spacing/varianty buttonów. |
| src/components/navbar/logout-button.tsx | Zmiana ikonki i wariantu Button dla logout. |
| src/components/navbar/auth-buttons.tsx | Usuwa LogoutButton stąd; linki przez Button render + CTA variant. |
| src/components/mode-toggle.tsx | DropdownMenuTrigger przechodzi na render. |
| src/components/login-prompt.tsx | Linki przez Button render + zamiana <a> na Link w stopce. |
| src/components/copy-jwt-button.tsx | TooltipTrigger przechodzi na render. |
| src/components/connect-guest-account.tsx | DialogTrigger/DialogClose + linki przez Button render. |
| src/components/app-footer.tsx | Nowy layout stopki + font Caveat + gradient tła. |
| src/app/quizzes/client.tsx | Linki CTA (create/import) przez Button render. |
| src/app/quiz/[quizId]/error.tsx | CTA/Linki w Button render + Accordion bez type/collapsible. |
| src/app/providers.tsx | Global TooltipProvider wrapper. |
| src/app/profile/client.tsx | TabsTrigger link przez render (zamiast asChild). |
| src/app/layout.tsx | Global font (Hanken Grotesk) + body background gradient. |
| src/app/import-quiz/client.tsx | DialogTrigger/AlertDialogTrigger render + korekty TabsList i dropzone klas. |
| src/app/grades/client.tsx | Select (items/SelectGroup) + TooltipTrigger render + zmiany propsów Select. |
| src/app/globals.css | Nowe tokeny kolorów/gradientów + animacje accordion. |
| src/app/error.tsx | Accordion bez type/collapsible. |
| src/app/(dashboard)/components/search-card.tsx | Drobna korekta ikonki. |
| src/app/(dashboard)/components/question-quiz-card.tsx | Korekty klas odpowiedzi. |
| src/app/(dashboard)/components/import-buttons-card.tsx | "use client" + nowe przyciski z ikonami i link przez render. |
| src/app/(dashboard)/components/about-card.tsx | Table wariant border + korekty paddingów/Avatar. |
| package.json | Usuwa Radix dependency set, dodaje @base-ui/react + dodatkowe biblioteki. |
| components.json | Zmienia styl shadcn na base-vega. |
|
hej @olios123 ogarniesz najpierw konfkikty? @maks1u @MarvinRucinski spójrzcie na preview deployment jak wygląda dla was, ja później też swoje yapowanie zrobie |
|
Yup, pracuje właśnie nad tym |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 78 out of 79 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/components/quiz/quick-edit-question-dialog.tsx:5
QuickEditQuestionDialogimports@radix-ui/react-focus-scope, but Radix dependencies were removed frompackage.json. This will fail at build/install time. ReplaceFocusScopewith an equivalent Base UI / React solution (or rely on the dialog’s built-in focus management) and remove the Radix import.
|
Fajne. |
|
Nie wiem czy to wina tego testowego deploymenta czy co ale jak kliknę wyloguj i odświeżę stronę to nadal jestem zalogowany. |
|
Dzięki za feedback. Sprawdzę co trzeba bo jeszcze mam błędy do poprawy EDIT: Ten branch jest dosyć stary bo robiony jakoś po spotkaniu wizyjnym dlatego może nie mieć jeszcze wszystkich fixów |
|
@Antoni-Czaplicki wydaje mi się, że skończyłem. Migracja na BaseUI ogarnięta, zmian sporo i nie wszystkich jestem pewien ale chyba najgorzej nie będzie. Ważna sprawa - miałem problem z testami kodu, copilot pozmieniał te testy i teraz przechodzą, nie wiem czy tak powinno się robić -> @MarvinRucinski zrobione, jak chcesz jakieś jeszcze zmiany to daj znać - poprawię |
|
Próbowałem pozmieniać trochę te kolorki w CSSie, no i też mi się wydaję było by lepiej zrobić ten shadow bardziej przezroczysty (po prostu dać |
|
@maks1u dzięki za odpowiedź. Antek proponował aby całkowicie usunąć shadow z light mode.
|
|
@olios123
|
|
@maks1u Super, dzięki
Jak jakieś jeszcze zmiany to na spokojnie sobie działaj |
|
|
Może już do deva to zmergować? Dużo jeszcze zostało do zrobienia w tym designie? |
|
Muszę poprawić jeszcze błędy wizualne oraz czekam na zmiany w Figmie, dobrze jakby Antek też na kod spojrzał bo było dużo zmian. Dopóki Maks nie ogarnie UI to tym nie mergował tego. |
|
TODO:
|
# Conflicts: # src/components/navbar/auth-buttons.tsx # src/components/profile/settings-form.tsx # src/components/quiz/brainrot-card.tsx
|
taka uwaga na szybko przed większym review - nested dialogi przy alert dialogu (edytor pytania w popupie -> usuń) nie ma animacji i stary normalnie jest pod spodem możesz zerknąć na https://base-ui.com/react/components/dialog#nested-dialogs i czy nam to pomaga |
PR w głównej mierze skupia się na przejściu z RadixUI na BaseUI oraz implementacji nowego designu według figmy:
https://www.figma.com/design/wqfYo0dTL9hqntF1QVLw02/Testownik-UI?node-id=303-262&t=CdOupphbJS475bT0-0
Changelog
Note
W niektórych miejscach nie trzymałem się Figmy 1:1 gdyż nie oddawała ona poprawnego designu na stronie - głównie chodzi tutaj o rozmiary elementów
Prośba o przejrzenie i zdecydowanie czy wszystko wygląda jak należy, ja osobiście zastanawiam się czy w niektórych miejscach kolory nie są zbyt "krzykliwe" (również w przypadku jasnego motywu).
Trzeba mieć też na uwadze zmiany nazw atrybutów i argumentów jakie mogę przyjmować componenty; starałem się przejrzeć większość plików i to pozmieniać ale nie jestem pewien czy czegoś nie ominąłem - eslint pokazał i tak 0 błędów.
TL;DR: Nowy design i BaseUI