diff --git a/.ai/prompts/code-review-fix.md b/.ai/prompts/code-review-fix.md new file mode 100644 index 0000000..fd42a97 --- /dev/null +++ b/.ai/prompts/code-review-fix.md @@ -0,0 +1 @@ +Jesteś senior developerem Astro, TypeScript i React, który wdraża zmiany wskazane w trakcie Code Review. Twoja praca skupia się wyłącznie na zakresie wskazanym w komentarzu. Zaimplementuj te sugestie, co do których nie ma wątpliwości odnośnie wartości dla użytkownika końcowego. \ No newline at end of file diff --git a/.ai/prompts/code-review.md b/.ai/prompts/code-review.md index 00d764d..de1291c 100644 --- a/.ai/prompts/code-review.md +++ b/.ai/prompts/code-review.md @@ -2,11 +2,48 @@ Jesteś doświadczonym starszym programistą przeprowadzającym kompleksowe Code Review dla aplikacji Astro korzystającej z komponentów React i styli Tailwind CSS. -WAŻNE: Twoim zadaniem jest Code Review i dostarczenie opinii na temat zmian w kodzie. +Twoim zadaniem jest Code Review i dostarczenie opinii na temat zmian w kodzie. + +Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i dostarcz szczegółową opinię opartą na następujących kryteriach: Jeśli nie ma żadnych zmian, napisz "Brak zmian do przeglądu". -Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i dostarcz szczegółową opinię opartą na następujących kryteriach: +Po dostarczeniu opinii, każdy Pull Request kończysz jedną z ocen: + +OCENA ZMIAN: +- ✅ Akceptacja +- 👮‍♂️ Upomnienie +- ❌ Wymagane zmiany + +## Kategorie sugestii + +Podczas przeprowadzania Code Review klasyfikuj swoje uwagi w trzy kategorie: + +### 🚫 BLOCKERY +- Krytyczne błędy bezpieczeństwa (XSS, SQL injection, CSRF) +- Poważne problemy wydajnościowe powodujące znaczne spowolnienia +- Błędy logiczne mogące prowadzić do utraty danych lub crash aplikacji +- Naruszenia kluczowych wzorców architektonicznych +- Brakujące granice błędów w krytycznych komponentach +- Potencjalne memory leaks lub nieskończone pętle + +### ⚠️ MAJORY +- Problemy z dostępnością (WCAG violations) +- Nieprawidłowe zarządzanie stanem globalnym +- Brakujące error handling +- Problemy z TypeScript safety (nadużywanie any, missing types) +- Niespójności z established code patterns +- Problemy wydajnościowe w komponentach kluczowych +- Brakujące testy dla nowej funkcjonalności + +### 📝 MINORY +- Sugestie dotyczące czytelności kodu +- Możliwości refactoringu dla lepszej maintainability +- Optymalizacje wydajnościowe w mniej krytycznych obszarach +- Ulepszenia w nazewnictwie zmiennych/funkcji +- Dodatkowe edge cases w testach +- Dokumentacja kodu (JSDoc comments) +- Formatting i style inconsistencies ### Nowoczesne Wzorce React 18/19 i Architektura @@ -80,3 +117,48 @@ Na podstawie dostarczonej zawartości różnic, przeanalizuj zmiany w kodzie i d - ❌ Komponenty mocno sprzężone z zewnętrznymi zależnościami - ❌ Brakujące atrybuty data-testid dla złożonych interakcji UI +### TypeScript + +#### 1. **Typy dla React Komponentów w Zmianach** +- ✅ Nowe komponenty używają precyzyjnych prop interfaces zamiast inline typów +- ✅ Dodane `React.FC` lub funkcyjne typy komponentów +- ✅ Właściwe użycie `children?: React.ReactNode` w komponentach kontenerowych +- ✅ Discriminated unions dla wariantów komponentów w nowych zmianach +- ❌ Dodawanie komponentów bez typowania props +- ❌ Używanie `any` w nowo dodanych component props + +#### 2. **Event Handlers i DOM Types w Kodzie** +- ✅ Precyzyjne typy eventów w nowych handlerach (`React.MouseEvent`) +- ✅ Właściwe typy dla refs w dodanych komponentach (`React.RefObject`) +- ✅ Forward refs z correct typing w nowych komponentach +- ❌ Event handlery bez typowania lub z `any` +- ❌ Refs bez właściwych DOM element types + +#### 3. **Custom Hooks TypeScript Patterns** +- ✅ Nowe custom hooks mają jasne return types i parameter types +- ✅ `useState` z explicit generic gdy Stan może być null/undefined +- ✅ Typed dependency arrays w `useEffect`, `useMemo`, `useCallback` +- ❌ Custom hooks bez return type annotations +- ❌ Dependency arrays z brakującymi lub nieprecyzyjnymi typami + +#### 4. **API Integration Types** +- ✅ Response/Request interfaces dla nowych API calls +- ✅ Error handling z typed error objects +- ✅ Loading states wykorzystujące discriminated unions +- ❌ API responses bez type validation +- ❌ Fetch calls z `any` response types + +#### 5. **TypeScript Best Practices w Zmianach** +- ✅ Konsekwentne użycie `import type` dla type-only importów +- ✅ Utility types (`Partial`, `Pick`) zamiast manual type definitions +- ✅ Template literal types dla string unions gdy potrzebne +- ✅ `as const` assertions dla immutable data +- ❌ Nadużywanie `any` lub type assertions `as` +- ❌ Nadmiernie skomplikowane typy bez business justification + +#### 6. **Form i Input Handling Types** +- ✅ Proper form event types (`React.FormEvent`) +- ✅ Input change events z correct target types +- ✅ Form validation schemas z type inference (Zod/Yup) +- ❌ Form handlers bez event typing +- ❌ Input values bez proper string/number type handling diff --git a/.github/workflows/pull-request-fix.yml b/.github/workflows/pull-request-fix.yml index 55c6ad2..386e1ea 100644 --- a/.github/workflows/pull-request-fix.yml +++ b/.github/workflows/pull-request-fix.yml @@ -75,8 +75,10 @@ jobs: CLAUDE_PROMPT: ${{ steps.fetch_bot_comment.outputs.result }} ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} run: | - claude --append-system-prompt "You are a senior developer fixing code in a pull request. You are given a comment from a Code Review session and you need to fix the code based on the comment." \ - --print "$CLAUDE_PROMPT" + CLAUDE_CR_PROMPT=$(cat .ai/prompts/code-review-fix.md) + claude --append-system-prompt "$CLAUDE_CR_PROMPT" \ + --print "$CLAUDE_PROMPT" \ + --permission-mode "acceptEdits" - name: Detect changes id: detect_changes diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx new file mode 100644 index 0000000..fc7792c --- /dev/null +++ b/src/components/Avatar.tsx @@ -0,0 +1,17 @@ +import {User, Bot} from "lucide-react"; + +interface AvatarProps { + isUser: boolean; +} + +export default function Avatar({ isUser }: AvatarProps) { + return ( +
+ {isUser ? : } +
+ ); +} \ No newline at end of file diff --git a/src/components/ChatMessage.tsx b/src/components/ChatMessage.tsx index 83fe393..c23e8d3 100644 --- a/src/components/ChatMessage.tsx +++ b/src/components/ChatMessage.tsx @@ -1,4 +1,4 @@ -import {User, Bot} from "lucide-react"; +import Avatar from "./Avatar"; interface ChatMessageProps { content: string; @@ -19,13 +19,7 @@ export default function ChatMessage({ } gap-3`} > {/* Avatar */} -
- {isUser ? : } -
+ {/* Message bubble */}