Flatten the repo: move everything out of app/ to the root
Now that the CLI and the Next.js app are one package, nesting it inside app/ served no purpose - the repo root itself becomes the published npm package. Merges app/.gitignore and app/README.md into the root versions, drops the now-duplicate app/LICENSE, and updates path references (README, docs/ARCHITECTURE.md, docs/CONFIG_REFERENCE.md, package.json's repository.directory) that assumed the app/ nesting. Also fixes a real bug this surfaced: the in-app docs viewer resolved docs/ relative to process.cwd(), which only worked by accident when the CLI happened to be invoked from app/'s parent directory. A first attempt at fixing it with import.meta.dirname broke instead, for the same cross-module-graph reason config-path resolution already documented - Next compiles Route Handlers through a separate module graph that doesn't preserve source-relative import.meta paths. Fixed by exposing the app root via TRIGGERSHELL_APP_ROOT (set once in server.ts, where import.meta *does* resolve correctly), the same pattern already used for TRIGGERSHELL_CONFIG_PATH. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,329 @@
|
||||
"use client";
|
||||
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import {
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { MultiSelect } from "./controls/multi-select";
|
||||
import type { ClientVariable } from "@/lib/config/serialize";
|
||||
|
||||
export function FieldRenderer({ variable }: { variable: ClientVariable }) {
|
||||
const { control } = useFormContext();
|
||||
const label = variable.label ?? variable.name;
|
||||
|
||||
return (
|
||||
<FormField
|
||||
control={control}
|
||||
name={variable.name}
|
||||
render={({ field }) => {
|
||||
switch (variable.control) {
|
||||
case "textarea":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "password":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
autoComplete="off"
|
||||
{...field}
|
||||
value={field.value ?? ""}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "number":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...(variable.type === "number"
|
||||
? {
|
||||
min: variable.min,
|
||||
max: variable.max,
|
||||
step: variable.step,
|
||||
}
|
||||
: {})}
|
||||
value={field.value ?? ""}
|
||||
onChange={(event) =>
|
||||
field.onChange(
|
||||
event.target.value === ""
|
||||
? undefined
|
||||
: Number(event.target.value),
|
||||
)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "slider": {
|
||||
const min = variable.type === "number" ? (variable.min ?? 0) : 0;
|
||||
const max =
|
||||
variable.type === "number" ? (variable.max ?? 100) : 100;
|
||||
const step = variable.type === "number" ? variable.step : undefined;
|
||||
const current =
|
||||
typeof field.value === "number" ? field.value : (min + max) / 2;
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
<span className="text-muted-foreground font-normal">
|
||||
{current}
|
||||
</span>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Slider
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={current}
|
||||
onValueChange={(next) => field.onChange(next)}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
|
||||
case "checkbox":
|
||||
return (
|
||||
<FormItem className="flex flex-row items-center gap-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={!!field.value}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(checked === true)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">{label}</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "switch":
|
||||
return (
|
||||
<FormItem className="flex flex-row items-center justify-between gap-2 space-y-0">
|
||||
<FormLabel className="font-normal">{label}</FormLabel>
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={!!field.value}
|
||||
onCheckedChange={(checked) => field.onChange(checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "select":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{variable.type === "enum" &&
|
||||
variable.choices.map((choice) => (
|
||||
<SelectItem key={choice} value={choice}>
|
||||
{choice}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "radio":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
value={field.value ?? ""}
|
||||
onValueChange={(value) => field.onChange(value)}
|
||||
>
|
||||
{variable.type === "enum" &&
|
||||
variable.choices.map((choice) => (
|
||||
<div key={choice} className="flex items-center gap-2">
|
||||
<RadioGroupItem
|
||||
value={choice}
|
||||
id={`${variable.name}-${choice}`}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`${variable.name}-${choice}`}
|
||||
className="font-normal"
|
||||
>
|
||||
{choice}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "checkboxGroup":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<div className="flex flex-col gap-2">
|
||||
{variable.type === "multiselect" &&
|
||||
variable.choices.map((choice) => {
|
||||
const values: string[] = Array.isArray(field.value)
|
||||
? field.value
|
||||
: [];
|
||||
return (
|
||||
<div key={choice} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={values.includes(choice)}
|
||||
onCheckedChange={(checked) =>
|
||||
field.onChange(
|
||||
checked === true
|
||||
? [...values, choice]
|
||||
: values.filter((v) => v !== choice),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Label className="font-normal">{choice}</Label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "multiselect":
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<FormControl>
|
||||
<MultiSelect
|
||||
choices={
|
||||
variable.type === "multiselect" ? variable.choices : []
|
||||
}
|
||||
value={Array.isArray(field.value) ? field.value : []}
|
||||
onChange={(value) => field.onChange(value)}
|
||||
/>
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
|
||||
case "text":
|
||||
default:
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{label}
|
||||
{variable.required && (
|
||||
<span className="text-destructive"> *</span>
|
||||
)}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} value={field.value ?? ""} />
|
||||
</FormControl>
|
||||
{variable.description && (
|
||||
<FormDescription>{variable.description}</FormDescription>
|
||||
)}
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user