refactor: migrate remaining components to Design System v4

111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions

View File

@@ -141,7 +141,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
<form onSubmit={handleSubmit} className="space-y-6">
{/* Step Type */}
<div>
<label className="mb-2 block text-sm font-medium text-foreground">
<label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Step Type <span className="text-red-400">*</span>
</label>
<div className="grid grid-cols-3 gap-2">
@@ -155,15 +155,15 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
className={cn(
'rounded-lg border p-3 text-left transition-colors',
stepType === option.value
? 'border-border bg-accent ring-2 ring-primary/20'
: 'border-border hover:border-border'
? 'border-[#1e2130] bg-accent ring-2 ring-primary/20'
: 'border-[#1e2130] hover:border-[#1e2130]'
)}
>
<div className="mb-1 flex items-center gap-2">
<Icon className="h-4 w-4" />
<span className="font-medium text-sm text-foreground">{option.label}</span>
<span className="font-medium text-sm text-[#e2e5eb]">{option.label}</span>
</div>
<p className="text-xs text-muted-foreground">{option.description}</p>
<p className="text-xs text-[#848b9b]">{option.description}</p>
</button>
)
})}
@@ -172,7 +172,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Title */}
<div>
<label htmlFor="title" className="mb-2 block text-sm font-medium text-foreground">
<label htmlFor="title" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Title <span className="text-red-400">*</span>
</label>
<Input
@@ -187,9 +187,9 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Instructions */}
<div>
<label htmlFor="instructions" className="mb-2 block text-sm font-medium text-foreground">
<label htmlFor="instructions" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Instructions <span className="text-red-400">*</span>
<span className="ml-2 text-xs font-normal text-muted-foreground">(Markdown supported)</span>
<span className="ml-2 text-xs font-normal text-[#848b9b]">(Markdown supported)</span>
</label>
<Textarea
id="instructions"
@@ -203,8 +203,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Help Text */}
<div>
<label htmlFor="helpText" className="mb-2 block text-sm font-medium text-foreground">
Help Text <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
<label htmlFor="helpText" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Help Text <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
</label>
<Textarea
id="helpText"
@@ -218,13 +218,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Commands */}
<div>
<div className="mb-2 flex items-center justify-between">
<label className="text-sm font-medium text-foreground">
Commands <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
<label className="text-sm font-medium text-[#e2e5eb]">
Commands <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
</label>
<button
type="button"
onClick={addCommand}
className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
<Plus className="h-3 w-3" />
Add Command
@@ -233,13 +233,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{commands.length > 0 && (
<div className="space-y-3">
{commands.map((cmd, index) => (
<div key={index} className="rounded-lg border border-border bg-accent/50 p-3">
<div key={index} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-medium text-muted-foreground">Command {index + 1}</span>
<span className="text-xs font-medium text-[#848b9b]">Command {index + 1}</span>
<button
type="button"
onClick={() => removeCommand(index)}
className="rounded p-1 text-muted-foreground hover:bg-red-400/10 hover:text-red-400"
className="rounded p-1 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400"
>
<X className="h-3 w-3" />
</button>
@@ -270,14 +270,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Category */}
<div>
<label htmlFor="category" className="mb-2 block text-sm font-medium text-foreground">
Category <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
<label htmlFor="category" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Category <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
</label>
<select
id="category"
value={categoryId}
onChange={(e) => setCategoryId(e.target.value)}
className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="">None</option>
{categories.map(cat => (
@@ -288,8 +288,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Tags */}
<div>
<label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-foreground">
Tags <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
<label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Tags <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
</label>
<div className="flex gap-2">
<Input
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
<button
type="button"
onClick={addTag}
className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
>
Add
</button>
@@ -314,7 +314,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{tags.map(tag => (
<span
key={tag}
className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-muted-foreground"
className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-[#848b9b]"
>
{tag}
<button
@@ -333,14 +333,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
{/* Visibility */}
<div>
<label htmlFor="visibility" className="mb-2 block text-sm font-medium text-foreground">
<label htmlFor="visibility" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
Visibility
</label>
<select
id="visibility"
value={visibility}
onChange={(e) => setVisibility(e.target.value as 'private' | 'team' | 'public')}
className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
>
<option value="private">Private (only me)</option>
<option value="team">Team (my team members)</option>