hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Execute oxfmt (#1166)

Browse Source 
Ran
pnpm oxfmt .

This should get the web repo aligned so that we can better enforce oxfmt going forward.
This commit is contained in:
Austin
2026-06-16 20:30:08 -04:00
committed by GitHub
parent c5690d1edb
commit d2cb51d489
378 changed files with 5548 additions and 1974 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/Form/DynamicForm.tsx
+19 -6
View File
@@ -1,5 +1,8 @@
import { createZodResolver } from "@components/Form/createZodResolver.ts";
import { DynamicFormField, type FieldProps } from "@components/Form/DynamicFormField.tsx";
import {
DynamicFormField,
type FieldProps,
} from "@components/Form/DynamicFormField.tsx";
import { FieldWrapper } from "@components/Form/FormWrapper.tsx";
import { Button } from "@components/UI/Button.tsx";
import { Heading } from "@components/UI/Typography/Heading.tsx";
@@ -66,7 +69,9 @@ export interface DynamicFormProps<T extends FieldValues> {
validationSchema?: ZodType<T>;
}
export type DynamicFormFormInit<T extends FieldValues> = (methods: UseFormReturn<T, T, T>) => void;
export type DynamicFormFormInit<T extends FieldValues> = (
methods: UseFormReturn<T, T, T>,
) => void;
export function DynamicForm<T extends FieldValues>({
propMethods,
@@ -84,7 +89,9 @@ export function DynamicForm<T extends FieldValues>({
const internalMethods = useForm<T>({
mode: "onChange",
defaultValues: defaultValues,
resolver: validationSchema ? createZodResolver(validationSchema) : undefined,
resolver: validationSchema
? createZodResolver(validationSchema)
: undefined,
shouldFocusError: false,
resetOptions: { keepDefaultValues: true },
values,
@@ -92,7 +99,8 @@ export function DynamicForm<T extends FieldValues>({
const methods = propMethods ?? internalMethods;
const { handleSubmit, control, getValues, formState, getFieldState } = methods;
const { handleSubmit, control, getValues, formState, getFieldState } =
methods;
useEffect(() => {
if (!propMethods) {
@@ -100,7 +108,10 @@ export function DynamicForm<T extends FieldValues>({
}
}, [onFormInit, propMethods, internalMethods]);
const isDisabled = (disabledBy?: DisabledBy<T>[], disabled?: boolean): boolean => {
const isDisabled = (
disabledBy?: DisabledBy<T>[],
disabled?: boolean,
): boolean => {
if (disabled) {
return true;
}
@@ -117,7 +128,9 @@ export function DynamicForm<T extends FieldValues>({
return field.invert ? value : !value;
}
if (typeof value === "number") {
return field.invert ? field.selector !== value : field.selector === value;
return field.invert
? field.selector !== value
: field.selector === value;
}
return false;
});
apps/web/src/components/Form/DynamicFormField.tsx
+24 -5
View File
@@ -1,12 +1,24 @@
import { GenericInput, type InputFieldProps } from "@components/Form/FormInput.tsx";
import {
GenericInput,
type InputFieldProps,
} from "@components/Form/FormInput.tsx";
import {
PasswordGenerator,
type PasswordGeneratorProps,
} from "@components/Form/FormPasswordGenerator.tsx";
import { type SelectFieldProps, SelectInput } from "@components/Form/FormSelect.tsx";
import { type ToggleFieldProps, ToggleInput } from "@components/Form/FormToggle.tsx";
import {
type SelectFieldProps,
SelectInput,
} from "@components/Form/FormSelect.tsx";
import {
type ToggleFieldProps,
ToggleInput,
} from "@components/Form/FormToggle.tsx";
import type { Control, FieldValues } from "react-hook-form";
import { type MultiSelectFieldProps, MultiSelectInput } from "./FormMultiSelect.tsx";
import {
type MultiSelectFieldProps,
MultiSelectInput,
} from "./FormMultiSelect.tsx";
export type FieldProps<T> =
| InputFieldProps<T>
@@ -34,7 +46,14 @@ export function DynamicFormField<T extends FieldValues>({
case "text":
case "password":
case "number":
return <GenericInput field={field} control={control} disabled={disabled} isDirty={isDirty} />;
return (
<GenericInput
field={field}
control={control}
disabled={disabled}
isDirty={isDirty}
/>
);
case "toggle":
return (
apps/web/src/components/Form/FormInput.tsx
+18 -5
View File
@@ -48,7 +48,10 @@ export function GenericInput<T extends FieldValues>({
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
if (field.properties?.fieldLength?.max && newValue.length > field.properties.fieldLength.max) {
if (
field.properties?.fieldLength?.max &&
newValue.length > field.properties.fieldLength.max
) {
return;
}
@@ -57,22 +60,32 @@ export function GenericInput<T extends FieldValues>({
}
controllerField.onChange(
field.type === "number" ? Number.parseFloat(newValue).toString() : newValue,
field.type === "number"
? Number.parseFloat(newValue).toString()
: newValue,
);
};
const currentLength = controllerField.value ? String(controllerField.value).length : 0;
const currentLength = controllerField.value
? String(controllerField.value).length
: 0;
return (
<div className="relative w-full">
<Input
type={field.type}
step={field.properties?.step}
value={field.type === "number" ? String(controllerField.value) : controllerField.value}
value={
field.type === "number"
? String(controllerField.value)
: controllerField.value
}
id={field.name}
onChange={handleInputChange}
showCopyButton={field.properties?.showCopyButton}
showPasswordToggle={field.properties?.showPasswordToggle || field.type === "password"}
showPasswordToggle={
field.properties?.showPasswordToggle || field.type === "password"
}
className={field.properties?.className}
{...restProperties}
disabled={disabled}
apps/web/src/components/Form/FormMultiSelect.tsx
+14 -11
View File
@@ -33,17 +33,20 @@ export function MultiSelectInput<T extends FieldValues>({
Object.values(enumValue)[0] !== null &&
"i18nKey" in Object.values(enumValue)[0];
const optionsToRender = Object.entries(enumValue).map(([key, configOrValue]) => {
if (isNewConfigStructure) {
const config = configOrValue as (typeof FLAGS_CONFIG)[keyof typeof FLAGS_CONFIG];
return {
key,
display: t(config.i18nKey),
value: config.value,
};
}
return { key, display: key, value: configOrValue as number };
});
const optionsToRender = Object.entries(enumValue).map(
([key, configOrValue]) => {
if (isNewConfigStructure) {
const config =
configOrValue as (typeof FLAGS_CONFIG)[keyof typeof FLAGS_CONFIG];
return {
key,
display: t(config.i18nKey),
value: config.value,
};
}
return { key, display: key, value: configOrValue as number };
},
);
return (
<MultiSelect
apps/web/src/components/Form/FormSelect.tsx
+10 -3
View File
@@ -49,8 +49,13 @@ export function SelectInput<T extends FieldValues>({
control,
});
const { enumValue, formatEnumName, defaultValue, className, ...remainingProperties } =
field.properties;
const {
enumValue,
formatEnumName,
defaultValue,
className,
...remainingProperties
} = field.properties;
const valueToKeyMap: Record<string, string> = {};
const optionsEnumValues: [string, number][] = [];
@@ -95,7 +100,9 @@ export function SelectInput<T extends FieldValues>({
className={cn([
className,
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
invalid ? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2" : "",
invalid
? "focus:ring-red-500 ring-red-500 ring-2 outline-offset-2"
: "",
])}
ref={ref}
onBlur={onBlur}
apps/web/src/components/Form/FormToggle.tsx
+6 -2
View File
@@ -34,8 +34,12 @@ export function ToggleInput<T extends FieldValues>({
{...field.properties}
className={cn([
field.properties?.className,
isDirty ? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2" : "",
invalid ? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-2" : "",
isDirty
? "focus:ring-sky-500 ring-sky-500 ring-2 ring-offset-2"
: "",
invalid
? "focus:ring-red-500 ring-red-500 ring-2 ring-offset-2"
: "",
])}
{...rest}
/>
apps/web/src/components/Form/FormWrapper.tsx
+3 -1
View File
@@ -24,7 +24,9 @@ export const FieldWrapper = ({
<div className="grid grid-cols-1 lg:grid-cols-[0.6fr_2fr_.1fr] sm:items-baseline gap-4">
<Label htmlFor={fieldName}>{label}</Label>
<div className="max-w-3xl">
<p className="text-sm text-slate-500 dark:text-slate-400">{description}</p>
<p className="text-sm text-slate-500 dark:text-slate-400">
{description}
</p>
<p hidden={valid ?? true} className="text-sm text-red-500">
{validationText}
</p>
apps/web/src/components/Form/createZodResolver.ts
+11 -3
View File
@@ -11,7 +11,11 @@ import type { ZodType } from "zod/v4";
export function createZodResolver<T extends FieldValues>(
schema: ZodType<T, unknown>,
): Resolver<T, unknown> {
return (values: T, _context: unknown, _options?: ResolverOptions<T>): ResolverResult<T> => {
return (
values: T,
_context: unknown,
_options?: ResolverOptions<T>,
): ResolverResult<T> => {
const result = schema.safeParse(values);
if (result.success) {
return {
@@ -20,7 +24,10 @@ export function createZodResolver<T extends FieldValues>(
};
}
const errors: Record<string, FieldError & { params?: Record<string, unknown> }> = {};
const errors: Record<
string,
FieldError & { params?: Record<string, unknown> }
> = {};
for (const issue of result.error.issues) {
const { path, code, message, ...params } = issue;
@@ -36,7 +43,8 @@ export function createZodResolver<T extends FieldValues>(
: "";
const newCode =
code.replace(/_([a-z])/g, (_, char) => char.toUpperCase()) + (suffix ? `.${suffix}` : "");
code.replace(/_([a-z])/g, (_, char) => char.toUpperCase()) +
(suffix ? `.${suffix}` : "");
const fieldError: FieldError & { params?: Record<string, unknown> } = {
type: newCode,