Skip to content

chore: remove form and field components usage in createFormHook #462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
achou11 merged 1 commit into from
Dec 15, 2025
Merged

chore: remove form and field components usage in createFormHook #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions src/renderer/src/hooks/forms.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import { createFormHook, createFormHookContexts } from '@tanstack/react-form'

const { fieldContext, formContext } = createFormHookContexts()

const { useAppForm } = createFormHook({
fieldComponents: {
TextField,
},
formComponents: {
SubmitButton: Button,
},
fieldComponents: {},
formComponents: {},
fieldContext,
formContext,
})
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/src/routes/app/projects/$projectId/download.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ function DownloadForm({
}
>
{([canSubmit, isSubmitting]) => (
<form.SubmitButton
<Button
type="submit"
form={FORM_ID}
fullWidth
Expand All @@ -375,7 +375,7 @@ function DownloadForm({
sx={{ maxWidth: 400 }}
>
{t(m.download)}
</form.SubmitButton>
</Button>
)}
</form.Subscribe>
</Box>
Expand Down
21 changes: 11 additions & 10 deletions ...erer/src/routes/app/projects/$projectId/observations/$observationDocId/-field-editors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import FormGroup from '@mui/material/FormGroup'
import Radio from '@mui/material/Radio'
import RadioGroup from '@mui/material/RadioGroup'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import { defineMessages, useIntl } from 'react-intl'
import * as v from 'valibot'

Expand Down Expand Up @@ -60,7 +61,7 @@ export function TextFieldEditor({
>
<form.AppField name="answer">
{(formField) => (
<formField.TextField
<TextField
fullWidth
multiline={field.appearance !== 'singleline'}
aria-label={field.label}
Expand Down Expand Up @@ -88,7 +89,7 @@ export function TextFieldEditor({
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<>
<form.SubmitButton
<Button
type="submit"
fullWidth
sx={{ maxWidth: 400 }}
Expand All @@ -97,7 +98,7 @@ export function TextFieldEditor({
endIcon={<Icon name="material-check-circle-outline-rounded" />}
>
{t(m.saveButtonText)}
</form.SubmitButton>
</Button>

<Button
type="button"
Expand Down Expand Up @@ -165,7 +166,7 @@ export function NumberFieldEditor({
>
<form.AppField name="answer">
{(formField) => (
<formField.TextField
<TextField
fullWidth
aria-label={field.label}
autoFocus
Expand Down Expand Up @@ -198,7 +199,7 @@ export function NumberFieldEditor({
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<>
<form.SubmitButton
<Button
type="submit"
fullWidth
sx={{ maxWidth: 400 }}
Expand All @@ -207,7 +208,7 @@ export function NumberFieldEditor({
endIcon={<Icon name="material-check-circle-outline-rounded" />}
>
{t(m.saveButtonText)}
</form.SubmitButton>
</Button>

<Button
type="button"
Expand Down Expand Up @@ -320,7 +321,7 @@ export function SingleSelectFieldEditor({
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<>
<form.SubmitButton
<Button
type="submit"
fullWidth
sx={{ maxWidth: 400 }}
Expand All @@ -329,7 +330,7 @@ export function SingleSelectFieldEditor({
endIcon={<Icon name="material-check-circle-outline-rounded" />}
>
{t(m.saveButtonText)}
</form.SubmitButton>
</Button>

<Button
type="button"
Expand Down Expand Up @@ -425,7 +426,7 @@ export function MultiSelectFieldEditor({
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<>
<form.SubmitButton
<Button
type="submit"
fullWidth
sx={{ maxWidth: 400 }}
Expand All @@ -434,7 +435,7 @@ export function MultiSelectFieldEditor({
endIcon={<Icon name="material-check-circle-outline-rounded" />}
>
{t(m.saveButtonText)}
</form.SubmitButton>
</Button>

<Button
type="button"
Expand Down
7 changes: 4 additions & 3 deletions ...erer/src/routes/app/projects/$projectId/observations/$observationDocId/-notes-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useSingleDocByDocId, useUpdateDocument } from '@comapeo/core-react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { captureException } from '@sentry/react'
import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
Expand Down Expand Up @@ -199,7 +200,7 @@ function NotesEditor({
<Stack direction="column" gap={4}>
<form.AppField name="notes">
{(field) => (
<field.TextField
<TextField
fullWidth
multiline
aria-label={t(m.accessibleNotesInputLabel)}
Expand Down Expand Up @@ -227,7 +228,7 @@ function NotesEditor({
<form.Subscribe selector={(state) => state.isSubmitting}>
{(isSubmitting) => (
<>
<form.SubmitButton
<Button
type="submit"
fullWidth
sx={{ maxWidth: 400 }}
Expand All @@ -238,7 +239,7 @@ function NotesEditor({
}
>
{t(m.saveButtonText)}
</form.SubmitButton>
</Button>

<Button
type="button"
Expand Down
9 changes: 5 additions & 4 deletions src/renderer/src/routes/app/projects/$projectId_/settings/info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import FormGroup from '@mui/material/FormGroup'
import FormLabel from '@mui/material/FormLabel'
import IconButton from '@mui/material/IconButton'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { defineMessages, useIntl } from 'react-intl'
Expand Down Expand Up @@ -201,7 +202,7 @@ function RouteComponent() {
<Box paddingInline={6}>
<form.AppField name="projectName">
{(field) => (
<field.TextField
<TextField
required
fullWidth
label={t(m.projectNameInputLabel)}
Expand Down Expand Up @@ -253,7 +254,7 @@ function RouteComponent() {
<Box paddingInline={6}>
<form.AppField name="projectDescription">
{(field) => (
<field.TextField
<TextField
fullWidth
multiline
rows={3}
Expand Down Expand Up @@ -454,7 +455,7 @@ function RouteComponent() {
{t(m.cancel)}
</Button>

<form.SubmitButton
<Button
type="submit"
form={FORM_ID}
fullWidth
Expand All @@ -465,7 +466,7 @@ function RouteComponent() {
sx={{ maxWidth: 400 }}
>
{t(m.save)}
</form.SubmitButton>
</Button>
</>
)}
</form.Subscribe>
Expand Down
7 changes: 4 additions & 3 deletions src/renderer/src/routes/app/settings/device-name.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { defineMessages, useIntl } from 'react-intl'
Expand Down Expand Up @@ -138,7 +139,7 @@ function RouteComponent() {
>
<form.AppField name="deviceName">
{(field) => (
<field.TextField
<TextField
required
fullWidth
label={t(m.inputLabel)}
Expand Down Expand Up @@ -226,7 +227,7 @@ function RouteComponent() {
{t(m.cancel)}
</Button>

<form.SubmitButton
<Button
type="submit"
form={FORM_ID}
fullWidth
Expand All @@ -237,7 +238,7 @@ function RouteComponent() {
sx={{ maxWidth: 400 }}
>
{t(m.save)}
</form.SubmitButton>
</Button>
</>
)}
</form.Subscribe>
Expand Down
13 changes: 7 additions & 6 deletions src/renderer/src/routes/app/settings_/test-data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
import Snackbar from '@mui/material/Snackbar'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { useStore } from '@tanstack/react-form'
import { useMutation } from '@tanstack/react-query'
Expand Down Expand Up @@ -353,7 +354,7 @@ function RouteComponent() {

<form.AppField name="observationCount">
{(field) => (
<field.TextField
<TextField
required
fullWidth
label={t(m.observationCountLabel)}
Expand Down Expand Up @@ -405,7 +406,7 @@ function RouteComponent() {
>
<form.AppField name="longitude">
{(field) => (
<field.TextField
<TextField
fullWidth
aria-disabled
disabled
Expand All @@ -424,7 +425,7 @@ function RouteComponent() {

<form.AppField name="latitude">
{(field) => (
<field.TextField
<TextField
fullWidth
aria-disabled
disabled
Expand All @@ -445,7 +446,7 @@ function RouteComponent() {

<form.AppField name="boundedDistance">
{(field) => (
<field.TextField
<TextField
required
fullWidth
label={t(m.boundedDistanceLabel)}
Expand Down Expand Up @@ -526,7 +527,7 @@ function RouteComponent() {
{t(m.cancel)}
</Button>

<form.SubmitButton
<Button
type="submit"
form={FORM_ID}
fullWidth
Expand All @@ -537,7 +538,7 @@ function RouteComponent() {
sx={{ maxWidth: 400 }}
>
{t(m.create)}
</form.SubmitButton>
</Button>
</>
)}
</form.Subscribe>
Expand Down
8 changes: 5 additions & 3 deletions src/renderer/src/routes/onboarding/device-name.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useMemo } from 'react'
import { useOwnDeviceInfo, useSetOwnDeviceInfo } from '@comapeo/core-react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { captureException } from '@sentry/react'
import { useStore } from '@tanstack/react-form'
Expand Down Expand Up @@ -136,7 +138,7 @@ function RouteComponent() {
>
<form.AppField name="deviceName">
{(field) => (
<field.TextField
<TextField
id={field.name}
required
fullWidth
Expand Down Expand Up @@ -193,7 +195,7 @@ function RouteComponent() {
<Box display="flex" justifyContent="center">
<form.Subscribe selector={(state) => state.canSubmit}>
{(canSubmit) => (
<form.SubmitButton
<Button
fullWidth
form="device-name-form"
variant="contained"
Expand All @@ -202,7 +204,7 @@ function RouteComponent() {
sx={{ maxWidth: 400 }}
>
{t(m.addName)}
</form.SubmitButton>
</Button>
)}
</form.Subscribe>
</Box>
Expand Down
8 changes: 5 additions & 3 deletions src/renderer/src/routes/onboarding/project/create/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useMemo } from 'react'
import { useCreateProject } from '@comapeo/core-react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Container from '@mui/material/Container'
import Stack from '@mui/material/Stack'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { captureException } from '@sentry/react'
import { useMutation } from '@tanstack/react-query'
Expand Down Expand Up @@ -123,7 +125,7 @@ function RouteComponent() {
>
<form.AppField name="projectName">
{(field) => (
<field.TextField
<TextField
id={field.name}
required
fullWidth
Expand Down Expand Up @@ -182,7 +184,7 @@ function RouteComponent() {
selector={(state) => [state.canSubmit, state.isSubmitting]}
>
{([canSubmit, isSubmitting]) => (
<form.SubmitButton
<Button
fullWidth
form="device-name-form"
variant="contained"
Expand All @@ -195,7 +197,7 @@ function RouteComponent() {
startIcon={<Icon name="material-check-circle-outline-rounded" />}
>
{t(m.createButton)}
</form.SubmitButton>
</Button>
)}
</form.Subscribe>
</Box>
Expand Down
Loading