chore(components): 🔧 Update component-related TypeScript files (4 tsx components)

This commit is contained in:
Lilith 2026-01-20 20:55:42 -08:00
parent 75bc3ba8d7
commit ba552c9b06
4 changed files with 25 additions and 25 deletions

View file

@ -66,7 +66,7 @@ const FilterInput = styled.div`
align-items: center;
gap: ${(props) => props.theme.spacing.xs};
padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
border: 1px solid ${(props) => props.theme.colors.border};
border: 1px solid ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.sm};
flex: 1;
max-width: 250px;
@ -82,7 +82,7 @@ const FilterInput = styled.div`
`;
const CategoryGroup = styled.div`
border: 1px solid ${(props) => props.theme.colors.border};
border: 1px solid ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.md};
overflow: hidden;
`;
@ -93,7 +93,7 @@ const CategoryHeader = styled.div`
justify-content: space-between;
padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
background: ${(props) => props.theme.colors.surface};
border-bottom: 1px solid ${(props) => props.theme.colors.border};
border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
font-weight: ${(props) => props.theme.typography.fontWeight.medium};
font-size: ${(props) => props.theme.typography.fontSize.sm};
cursor: pointer;
@ -129,7 +129,7 @@ const FileRow = styled.label<{ $selected: boolean }>`
}
&:not(:last-child) {
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
}
`;
@ -201,8 +201,8 @@ const LoadingState = styled.div`
const ErrorState = styled.div`
padding: ${(props) => props.theme.spacing.lg};
color: ${(props) => props.theme.colors.error};
background: ${(props) => props.theme.colors.error}10;
color: ${(props) => props.theme.colors.error.toString()};
background: ${(props) => `${props.theme.colors.error}10`};
border-radius: ${(props) => props.theme.borderRadius.md};
`;

View file

@ -68,7 +68,7 @@ const FilterInput = styled.div`
align-items: center;
gap: ${(props) => props.theme.spacing.xs};
padding: ${(props) => props.theme.spacing.xs} ${(props) => props.theme.spacing.sm};
border: 1px solid ${(props) => props.theme.colors.border};
border: 1px solid ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.sm};
flex: 1;
max-width: 250px;
@ -84,7 +84,7 @@ const FilterInput = styled.div`
`;
const CategoryGroup = styled.div`
border: 1px solid ${(props) => props.theme.colors.border};
border: 1px solid ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.md};
overflow: hidden;
`;
@ -95,7 +95,7 @@ const CategoryHeader = styled.div`
justify-content: space-between;
padding: ${(props) => props.theme.spacing.sm} ${(props) => props.theme.spacing.md};
background: ${(props) => props.theme.colors.surface};
border-bottom: 1px solid ${(props) => props.theme.colors.border};
border-bottom: 1px solid ${(props) => props.theme.colors.border.toString()};
font-weight: ${(props) => props.theme.typography.fontWeight.medium};
font-size: ${(props) => props.theme.typography.fontSize.sm};
cursor: pointer;
@ -132,7 +132,7 @@ const FileRow = styled.div<{ $selected: boolean; $expanded?: boolean }>`
}
&:not(:last-child) {
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
}
`;
@ -206,7 +206,7 @@ const statusLabels: Record<CacheStatus, string> = {
const KeysContainer = styled.div`
background: ${(props) => props.theme.colors.background.secondary};
border-top: 1px solid ${(props) => props.theme.colors.border};
border-top: 1px solid ${(props) => props.theme.colors.border.toString()};
`;
const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
@ -227,7 +227,7 @@ const KeyRow = styled.label<{ $selected: boolean; $depth: number }>`
}
&:not(:last-child) {
border-bottom: 1px solid ${(props) => props.theme.colors.border}30;
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}30`};
}
`;
@ -253,8 +253,8 @@ const LoadingState = styled.div`
const ErrorState = styled.div`
padding: ${(props) => props.theme.spacing.lg};
color: ${(props) => props.theme.colors.error};
background: ${(props) => props.theme.colors.error}10;
color: ${(props) => props.theme.colors.error.toString()};
background: ${(props) => `${props.theme.colors.error}10`};
border-radius: ${(props) => props.theme.borderRadius.md};
`;

View file

@ -33,7 +33,7 @@ const ProgressValue = styled.span`
const ProgressBarContainer = styled.div`
height: 8px;
background: ${(props) => props.theme.colors.border};
background: ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.full};
overflow: hidden;
`;
@ -47,11 +47,11 @@ const ProgressBarFill = styled.div<{ $progress: number; $status: string }>`
background: ${(props) => {
switch (props.$status) {
case 'completed':
return props.theme.colors.success;
return props.theme.colors.success.toString();
case 'failed':
return props.theme.colors.error;
return props.theme.colors.error.toString();
default:
return props.theme.colors.primary;
return props.theme.colors.primary.toString();
}
}};
`;
@ -70,9 +70,9 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
color: ${(props) => {
switch (props.$variant) {
case 'success':
return props.theme.colors.success;
return props.theme.colors.success.toString();
case 'error':
return props.theme.colors.error;
return props.theme.colors.error.toString();
default:
return props.theme.colors.text.secondary;
}
@ -82,7 +82,7 @@ const SummaryItem = styled.div<{ $variant: 'success' | 'error' | 'neutral' }>`
const ResultsList = styled.div`
max-height: 200px;
overflow-y: auto;
border: 1px solid ${(props) => props.theme.colors.border};
border: 1px solid ${(props) => props.theme.colors.border.toString()};
border-radius: ${(props) => props.theme.borderRadius.md};
`;
@ -94,15 +94,15 @@ const ResultRow = styled.div<{ $status: FileResultStatus }>`
font-size: ${(props) => props.theme.typography.fontSize.sm};
&:not(:last-child) {
border-bottom: 1px solid ${(props) => props.theme.colors.border}50;
border-bottom: 1px solid ${(props) => `${props.theme.colors.border}50`};
}
color: ${(props) => {
switch (props.$status) {
case 'passed':
return props.theme.colors.success;
return props.theme.colors.success.toString();
case 'failed':
return props.theme.colors.error;
return props.theme.colors.error.toString();
default:
return props.theme.colors.text.secondary;
}

View file

@ -6,7 +6,7 @@
*/
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent, within } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { TrialExpiringModal } from './TrialExpiringModal';
import { format, parseISO } from 'date-fns';