schulze/fire
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Releases Activity

zod 4 migration
All checks were successful
Lint / Lint and Typecheck (push) Successful in 45s
Details
Lint / Lint and Typecheck (pull_request) Successful in 41s
Details

Browse Source
This commit is contained in:
Felix Schulze
2025-07-13 00:55:18 +02:00
parent e1cf5c05b5
commit 41c4e27160
1 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/app/components/FireCalculatorForm.tsx
View File

@@ -120,7 +120,7 @@ export default function FireCalculatorForm() {
const [showing4percent, setShowing4percent] = useState(false); const [showing4percent, setShowing4percent] = useState(false);
// Initialize form with default values // Initialize form with default values
const form = useForm<FormValues>({ const form = useForm<z.input<typeof formSchema>, undefined, FormValues>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
defaultValues: { defaultValues: {
startingCapital: 50000, startingCapital: 50000,
@@ -258,11 +258,18 @@ export default function FireCalculatorForm() {
<Input <Input
placeholder="e.g., 10000" placeholder="e.g., 10000"
type="number" type="number"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -279,11 +286,18 @@ export default function FireCalculatorForm() {
<Input <Input
placeholder="e.g., 500" placeholder="e.g., 500"
type="number" type="number"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -300,11 +314,18 @@ export default function FireCalculatorForm() {
<Input <Input
placeholder="e.g., 30" placeholder="e.g., 30"
type="number" type="number"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -321,11 +342,18 @@ export default function FireCalculatorForm() {
<Input <Input
placeholder="e.g., 90" placeholder="e.g., 90"
type="number" type="number"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -343,11 +371,18 @@ export default function FireCalculatorForm() {
placeholder="e.g., 7" placeholder="e.g., 7"
type="number" type="number"
step="0.1" step="0.1"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -365,11 +400,18 @@ export default function FireCalculatorForm() {
placeholder="e.g., 2" placeholder="e.g., 2"
type="number" type="number"
step="0.1" step="0.1"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -388,11 +430,18 @@ export default function FireCalculatorForm() {
<Input <Input
placeholder="e.g., 2000" placeholder="e.g., 2000"
type="number" type="number"
{...field} value={field.value as number | string | undefined}
onChange={(value) => { onChange={(e) => {
field.onChange(value); field.onChange(
e.target.value === ""
? undefined
: Number(e.target.value),
);
void form.handleSubmit(onSubmit)(); void form.handleSubmit(onSubmit)();
}} }}
onBlur={field.onBlur}
name={field.name}
ref={field.ref}
/> />
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
@@ -406,11 +455,13 @@ export default function FireCalculatorForm() {
name="retirementAge" name="retirementAge"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Retirement Age: {field.value}</FormLabel> <FormLabel>
Retirement Age: {field.value as number}
</FormLabel>
<FormControl> <FormControl>
<Slider <Slider
name="retirementAge" name="retirementAge"
value={[field.value]} value={[field.value as number]}
min={25} min={25}
max={75} max={75}
step={1} step={1}
@@ -563,8 +614,8 @@ export default function FireCalculatorForm() {
<ReferenceLine <ReferenceLine
x={ x={
irlYear + irlYear +
(form.getValues("retirementAge") - (Number(form.getValues("retirementAge")) -
form.getValues("currentAge")) Number(form.getValues("currentAge")))
} }
stroke="var(--primary)" stroke="var(--primary)"
strokeWidth={2} strokeWidth={2}
@@ -579,7 +630,7 @@ export default function FireCalculatorForm() {
x={ x={
irlYear + irlYear +
(result.retirementAge4percent - (result.retirementAge4percent -
form.getValues("currentAge")) Number(form.getValues("currentAge")))
} }
stroke="var(--secondary)" stroke="var(--secondary)"
strokeWidth={1} strokeWidth={1}
@@ -642,8 +693,8 @@ export default function FireCalculatorForm() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-3xl font-bold"> <p className="text-3xl font-bold">
{form.getValues("lifeExpectancy") - {Number(form.getValues("lifeExpectancy")) -
form.getValues("retirementAge")} Number(form.getValues("retirementAge"))}
</p> </p>
</CardContent> </CardContent>
</Card> </Card>
@@ -674,7 +725,7 @@ export default function FireCalculatorForm() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-3xl font-bold"> <p className="text-3xl font-bold">
{form.getValues("lifeExpectancy") - {Number(form.getValues("lifeExpectancy")) -
(result.retirementAge4percent ?? 0)} (result.retirementAge4percent ?? 0)}
</p> </p>
</CardContent> </CardContent>