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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user