Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 | 56x 56x 56x 56x 56x 56x 8x 12x 4x 4x 4x 4x 24x 2x 267x 267x 267x 48x 48x 219x 179x 48x 48x 48x 215x 213x 151x 14x 14x 14x 10x 10x 10x 14x 284x 284x 284x 284x 48x 284x 48x 284x 73x 73x 73x 85x 85x 85x 73x 284x 284x 284x 284x 4x 284x 284x 105x 57x 58x 58x 58x 58x 1x 1x 1x 284x 48x 13x 6x 2x 284x 4x 1x 1x 1x 4x 1x 1x 4x 284x 2x 1x 1x 2x 282x 136x 136x 136x 136x 136x 20x 20x 20x 20x 20x 57x 2x 48x 2x 157x | import { useEffect, useMemo, useState } from 'react'
import { Button } from '@/components/ui/button'
import type { components } from '@/types/api'
type SkillRepo = components['schemas']['SkillRepo']
const NAME_PATTERN = /^[a-z0-9-]+$/
const HTTPS_URL_PATTERN = /^https:\/\/\S+$/
const MAX_NAME_LENGTH = 64
const MAX_ITEMS = 16
interface SkillReposEditorProps {
value: SkillRepo[] | undefined
I onChange?: (value: SkillRepo[]) => void
I readOnly?: boolean
I 'data-testid'?: string
}
fIunction normalize(value: SkillRepo[] | undefined): SkillRepo[] {
return Array.isArray(value) ? value : []
}
fIunction validateName(name: string, existing: SkillRepo[]): string | null {
I Iif (name.trim() === '') return 'Name is required'
Iif (name.length > MAX_NAME_LENGTH) return `Name must be at most ${MAX_NAME_LENGTH} characters`
if (!NAME_PATTERN.test(name)) {
return 'Name must use lowercase letters, digits and hyphens only'
}
if (existing.some((r) => r.name === name)) return 'Name is already in use'
return null
}
function validateUrl(url: string): string | null {
if (url.trim() === '') return 'URL is required'
if (!HTTPS_URL_PATTERN.test(url)) return 'URL must be an https:// git URL'
return null
}
export function SkillReposEditor({
vIalue,
oInChange,
readOnly = false,
'data-testid': dataTestId,
}: SkillReposEditorProps) {
const [rows, setRows] = useState<SkillRepo[]>(() => normalize(value))
const [draftName, setDraftName] = useState('')
const [draftUrl, setDraftUrl] = useState('')
const [touched, setTouched] = useState<Record<number, boolean>>({})
useEffect(() => {
setRows(normalize(value))
}, [value])
const duplicateNames = useMemo(() => {
const seen = new Set<string>()
const dupes = new Set<string>()
for (const row of rows) {
Iif (!row.name) continue
Iif (seen.has(row.name)) dupes.add(row.name)
seen.add(row.name)
}
return dupes
}, [rows])
const draftNameError = draftName !== '' ? validateName(draftName, rows) : null
const draftUrlError = draftUrl !== '' ? validateUrl(draftUrl) : null
const draftValid = !draftNameError && !draftUrlError && draftName !== '' && draftUrl !== ''
const atLimit = rows.length >= MAX_ITEMS
const emit = (next: SkillRepo[]) => onChange?.(next)
const handleRowChange = (index: number, field: 'name' | 'url', newValue: string) => {
I setTouched((prev) => ({ ...prev, [index]: true }))
setRows((prev) => {
const next = prev.map((row, i) =>
i === index ? { ...row, [field]: newValue } : row,
)
emit(next)
return next
})
}
const handleRemove = (index: number) => {
setRows((prev) => {
const next = prev.filter((_, i) => i !== index)
emit(next)
return next
})
}
const handleAdd = () => {
if (!draftValid || atLimit) return
const next = [...rows, { name: draftName.trim(), url: draftUrl.trim() }]
setRows(next)
emit(next)
setDraftName('')
setDraftUrl('')
setTouched({})
}
if (readOnly) {
if (rows.length === 0) {
return (
<span className="text-sm text-muted-foreground" data-testid={dataTestId}>
No skill repositories
</span>
)
}
return (
<div className="flex flex-col gap-1" data-testid={dataTestId}>
{rows.map((row) => (
<div key={row.name} className="text-sm">
<span className="font-mono font-semibold text-muted-foreground">{row.name}:</span>{' '}
<span>{row.url}</span>
</div>
))}
</div>
)
}
return (
<div className="flex flex-col gap-2" data-testid={dataTestId}>
{rows.map((row, i) => {
const rowTouched = touched[i] === true
const nameError = rowTouched && validateName(row.name, [])
const dupError = duplicateNames.has(row.name) ? 'Name is already in use' : null
const urlError = rowTouched && validateUrl(row.url)
return (
<div key={`${row.name}-${i}`} className="flex flex-col gap-1">
<div className="flex items-center gap-2">
<input
type="text"
value={row.name}
onChange={(e) => handleRowChange(i, 'name', e.target.value)}
placeholder="Name"
aria-label="Name"
data-testid={`skill-repo-name-${i}`}
className={'flex h-9 w-48 rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30' + (nameError || dupError ? ' border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20' : ' border-input')}
/>
<input
type="text"
value={row.url}
onChange={(e) => handleRowChange(i, 'url', e.target.value)}
placeholder="https://...git"
aria-label="URL"
data-testid={`skill-repo-url-${i}`}
className={'flex h-9 flex-1 rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30' + (urlError ? ' border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20' : ' border-input')}
/>
<Button
variant="ghost"
size="icon-sm"
type="button"
aria-label={`Remove skill repo ${row.name}`}
data-testid={`skill-repo-remove-${i}`}
onClick={() => handleRemove(i)}
>
✕
</Button>
</div>
{(nameError || dupError) && (
<p className="text-xs text-destructive">{nameError ?? dupError}</p>
)}
{urlError && <p className="text-xs text-destructive">{urlError}</p>}
</div>
)
})}
<div className="flex items-center gap-2">
<input
type="text"
value={draftName}
onChange={(e) => setDraftName(e.target.value)}
placeholder="Name (a-z0-9-)"
aria-label="New skill repo name"
data-testid="skill-repo-draft-name"
className={'flex h-9 w-48 rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30' + (draftNameError ? ' border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20' : ' border-input')}
/>
<input
type="text"
value={draftUrl}
onChange={(e) => setDraftUrl(e.target.value)}
placeholder="https://...git"
aria-label="New skill repo url"
data-testid="skill-repo-draft-url"
className={'flex h-9 flex-1 rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30' + (draftUrlError ? ' border-destructive focus-visible:border-destructive focus-visible:ring-destructive/20' : ' border-input')}
/>
<Button
variant="outline"
size="sm"
type="button"
onClick={handleAdd}
disabled={atLimit}
data-testid="skill-repo-add"
>
+ Add skill repo
</Button>
</div>
{(draftNameError || draftUrlError) && (
<p className="text-xs text-destructive">
{draftNameError ?? draftUrlError}
</p>
)}
{atLimit && (
<p className="text-xs text-muted-foreground">
Maximum {MAX_ITEMS} skill repositories
</p>
)}
</div>
)
}
|