* revamp work with ts

Author: skryukov

Gemfile.lock

@@ -523,7 +523,7 @@ GEM
       railties (>= 7.1.0)
     turbo_power (0.7.0)
       turbo-rails (>= 1.3.0)
-    typelizer (0.4.1)
+    typelizer (0.4.2)
       railties (>= 6.0.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)

app/frontend/components/Header.tsx

@@ -3,7 +3,7 @@ import { usePage } from "@inertiajs/react";
 import { Menu, X } from "lucide-react";
 import { useState } from "react";
 
-import type { User } from "../serializers";
+import type { User } from "@/serializers";
 
 import { Logo } from "./Logo";
 

app/frontend/components/Layout.tsx

@@ -1,6 +1,6 @@
 import { usePage } from "@inertiajs/react";
 
-import type { User } from "../serializers";
+import type { User } from "@/serializers";
 
 import { Footer } from "./Footer";
 import { Header } from "./Header";

app/frontend/components/ReviewScores.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 interface ReviewScoresProps {
   scores: Record<string, number> | undefined;
 }
@@ -19,7 +17,7 @@ const scoreClass = (value: number) => {
   }
 };
 
-const ReviewScores: React.FC<ReviewScoresProps> = ({ scores }) => {
+const ReviewScores = ({ scores }: ReviewScoresProps) => {
   if (!scores || Object.keys(scores).length === 0) {
     return null;
   }

app/frontend/components/Select.tsx

@@ -1,4 +1,4 @@
-import type React from "react";
+import type {ChangeEvent} from "react";
 
 interface SelectOption {
   value: string;
@@ -8,20 +8,20 @@ interface SelectOption {
 interface SelectProps {
   id: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;
   options: SelectOption[];
   required?: boolean;
   placeholder?: string;
 }
 
-const Select: React.FC<SelectProps> = ({
+const Select = ({
   id,
   value,
   onChange,
   options,
   required,
   placeholder,
-}) => {
+}: SelectProps) => {
   return (
     <div className="relative">
       <select

app/frontend/components/StarRating.tsx

@@ -1,5 +1,4 @@
 import { Star } from "lucide-react";
-import type React from "react";
 import { useState } from "react";
 
 interface StarRatingProps {
@@ -11,14 +10,14 @@ interface StarRatingProps {
   readonly?: boolean;
 }
 
-const StarRating: React.FC<StarRatingProps> = ({
+const StarRating = ({
   value,
   name,
   onChange,
   label,
   required,
   readonly,
-}) => {
+}: StarRatingProps) => {
   const [hoverRating, setHoverRating] = useState(0);
 
   const handleStarClick = (rating: number) => {

app/frontend/components/StatusBadge.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 type ProposalStatus =
   | "draft"
   | "submitted"
@@ -14,7 +12,7 @@ interface StatusBadgeProps {
   status: ProposalStatus;
 }
 
-const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
+const StatusBadge = ({ status }: StatusBadgeProps) => {
   let badgeClasses = "badge ";
   let statusText = "";
 

app/frontend/components/TextAreaWithCounter.tsx

@@ -1,4 +1,4 @@
-import type React from "react";
+import type {ChangeEvent} from "react";
 
 interface TextAreaWithCounterProps {
   id: string;
@@ -9,21 +9,21 @@ interface TextAreaWithCounterProps {
   required?: boolean;
 }
 
-const TextAreaWithCounter: React.FC<TextAreaWithCounterProps> = ({
+const TextAreaWithCounter = ({
   id,
   value,
   onChange,
   maxLength,
   placeholder,
   required,
-}) => {
+}: TextAreaWithCounterProps) => {
   // Count line breaks as \r\n (2 characters) to match Ruby/Rails backend
   const lineBreaks = (value.match(/\n/g) ?? []).length;
   const characterCount = value.length + lineBreaks;
   const isNearLimit = characterCount >= maxLength * 0.8;
   const isAtLimit = characterCount >= maxLength;
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const newValue = e.target.value;
     const newLineBreaks = (newValue.match(/\n/g) ?? []).length;
     const newCharacterCount = newValue.length + newLineBreaks;

app/frontend/icons/Google.tsx

@@ -1,8 +1,6 @@
-import type React from "react";
-
-const GoogleIcon: React.FC<{ className?: string }> = ({
+const GoogleIcon = ({
   className = "h-5 w-5",
-}) => (
+}: { className?: string }) => (
   <svg className={className} viewBox="0 0 24 24" fill="currentColor">
     <path
       d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"

app/frontend/pages/evaluations/index.tsx

@@ -1,8 +1,8 @@
 import { router, usePage } from "@inertiajs/react";
 
-import Layout from "../../components/Layout";
-import type { Evaluation } from "../../serializers";
-import { formatDeadline } from "../../utils/dateHelpers";
+import Layout from "@/components/Layout";
+import type { Evaluation } from "@/serializers";
+import { formatDeadline } from "@/utils/dateHelpers";
 
 interface IndexProps {
   evaluations: Evaluation[];