Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(ui): replace inline INPUT_CLS/LABEL_CLS/BTN_DANGER constants and action link classes with CSS component classes

Browse Source 
Remove duplicated Tailwind class string constants from 15 component files.
Use app-input, app-select, app-label, app-action-danger-btn, and
app-action-delete CSS component classes from globals.css instead.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-04-10 09:21:03 +02:00
parent 9ba49c9ab8
commit 05aa864359
15 changed files with 159 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/blueprints/BlueprintFieldEditor.tsx
+10 -14
View File
@@ -18,16 +18,12 @@ const FIELD_TYPES: { value: FieldType; label: string }[] = [
{ value: FieldType.EMAIL, label: "Email" },
];
const INPUT_CLS = "app-input";
const BTN_PRIMARY =
"px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50";
const BTN_SECONDARY =
"px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium";
const BTN_DANGER = "app-action-danger-btn";
function makeEmptyField(order: number): BlueprintFieldDefinition {
return {
id: Math.random().toString(36).slice(2),
@@ -73,19 +69,19 @@ function OptionsEditor({ options, onChange }: OptionsEditorProps) {
value={opt.value}
onChange={(e) => updateOption(idx, "value", e.target.value)}
placeholder="value"
className={`${INPUT_CLS} flex-1`}
className="app-input flex-1"
/>
<input
type="text"
value={opt.label}
onChange={(e) => updateOption(idx, "label", e.target.value)}
placeholder="label"
className={`${INPUT_CLS} flex-1`}
className="app-input flex-1"
/>
<button
type="button"
onClick={() => removeOption(idx)}
className={BTN_DANGER}
className="app-action-danger-btn"
aria-label="Remove option"
>
×
@@ -140,7 +136,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
value={field.key}
onChange={(e) => update("key", e.target.value)}
placeholder="field_key"
className={`${INPUT_CLS} w-36 font-mono`}
className="app-input w-36 font-mono"
aria-label="Field key"
/>
@@ -150,7 +146,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
value={field.label}
onChange={(e) => update("label", e.target.value)}
placeholder="Label"
className={`${INPUT_CLS} w-40`}
className="app-input w-40"
aria-label="Field label"
/>
@@ -166,7 +162,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
: undefined;
onChange({ ...field, type: t, options: clearedOptions } as BlueprintFieldDefinition);
}}
className={`${INPUT_CLS} w-36`}
className="app-input w-36"
aria-label="Field type"
>
{FIELD_TYPES.map((ft) => (
@@ -201,7 +197,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
<button
type="button"
onClick={onDelete}
className={BTN_DANGER}
className="app-action-danger-btn"
aria-label="Delete field"
>
×
@@ -218,7 +214,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
value={field.group ?? ""}
onChange={(e) => update("group", e.target.value || undefined)}
placeholder="Section heading"
className={INPUT_CLS}
className="app-input"
/>
</div>
<div className="flex flex-col gap-1">
@@ -232,7 +228,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
update("placeholder", e.target.value || undefined)
}
placeholder="Placeholder text"
className={INPUT_CLS}
className="app-input"
/>
</div>
<div className="flex flex-col gap-1">
@@ -246,7 +242,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
update("description", e.target.value || undefined)
}
placeholder="Helper text"
className={INPUT_CLS}
className="app-input"
/>
</div>