proje-react-panel 1.10.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -73,7 +73,7 @@
     "axios": ">=1.0.0",
     "react": ">=19.0.0",
     "react-hook-form": ">=7.54.2",
-    "react-router": "7.3.0",
+    "react-router": "^7.3.0",
     "react-select": "^5.10.1",
     "use-sync-external-store": ">=1.4.0",
     "zustand": ">=5.0.3"

package/src/__tests__/components/form/NumberField.test.tsx

@@ -0,0 +1,193 @@
+/**
+ * @jest-environment jsdom
+ */
+import { TextDecoder, TextEncoder } from 'util';
+// react-router reads TextEncoder at import time and jsdom has none — set it up before the
+// imports below pull the router in.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import 'reflect-metadata';
+import React from 'react';
+import { beforeEach, describe, expect, it, jest } from '@jest/globals';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { FormProvider, useForm, UseFormReturn } from 'react-hook-form';
+import { plainToInstance, Type } from 'class-transformer';
+import { getInputFields, Input } from '../../../decorators/form/Input';
+import { Form, getFormConfiguration } from '../../../decorators/form/Form';
+import { InnerForm } from '../../../components/form/InnerForm';
+import { AnyClass } from '../../../types/AnyClass';
+
+// react-toastify writes to a container that is not mounted here; the calls are noise for
+// this test, not the subject of it.
+jest.mock('react-toastify', () => ({
+  toast: { success: jest.fn(), error: jest.fn() },
+}));
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const submitted = jest.fn<(data: any) => Promise<any>>();
+const onSubmit = async (data: unknown) => {
+  submitted(data);
+  return {};
+};
+
+@Form({ onSubmit })
+class NumberForm {
+  @Input({ label: 'Name' })
+  name: string;
+
+  @Input({ inputType: 'number', label: 'Amount' })
+  amount: number;
+
+  @Input({ inputType: 'number', label: 'Discount' })
+  discount: number;
+
+  @Input({ inputType: 'date', label: 'Starts at' })
+  startsAt: string;
+
+  @Input({ type: 'hidden', inputType: 'number' })
+  id: number;
+}
+
+@Form({ onSubmit })
+class DefaultedNumberForm {
+  @Input({ inputType: 'number', label: 'Amount', defaultValue: '3' })
+  amount: number;
+}
+
+// The model authors used to have to remember this; it must keep working now that the field
+// already arrives as a number.
+class TypedNumberModel {
+  @Type(() => Number)
+  amount: number;
+}
+
+function renderForm<T extends AnyClass>(model: new () => T) {
+  const inputs = getInputFields(model as never);
+  const formClass = getFormConfiguration(model as never);
+  let form: UseFormReturn | undefined;
+  // FormPage seeds useForm with the declared defaultValues, which are typed as strings.
+  const defaultValues = inputs.reduce(
+    (acc, input) => {
+      acc[input.name] = input.defaultValue;
+      return acc;
+    },
+    {} as Record<string, unknown>
+  );
+
+  function Harness() {
+    form = useForm({ defaultValues });
+    return (
+      <MemoryRouter>
+        <FormProvider {...form}>
+          <InnerForm inputs={inputs} formClass={formClass} />
+        </FormProvider>
+      </MemoryRouter>
+    );
+  }
+
+  const utils = render(<Harness />);
+  return { ...utils, getForm: () => form! };
+}
+
+const fieldOf = (container: HTMLElement, name: string) =>
+  container.querySelector(`[name="${name}"]`) as HTMLInputElement;
+
+const submitForm = async (container: HTMLElement) => {
+  fireEvent.submit(container.querySelector('form')!);
+  await waitFor(() => expect(submitted).toHaveBeenCalled());
+  return submitted.mock.calls[submitted.mock.calls.length - 1][0];
+};
+
+describe('number and date fields in the submitted body', () => {
+  beforeEach(() => {
+    submitted.mockClear();
+  });
+
+  it('sends a filled number input as a number, not a string', async () => {
+    const { container } = renderForm(NumberForm);
+
+    fireEvent.change(fieldOf(container, 'amount'), { target: { value: '42' } });
+    const body = await submitForm(container);
+
+    expect(typeof body.amount).toBe('number');
+    expect(body.amount).toBe(42);
+  });
+
+  it('sends an empty number input as undefined, so it drops out of the JSON body', async () => {
+    const { container } = renderForm(NumberForm);
+
+    fireEvent.change(fieldOf(container, 'amount'), { target: { value: '7' } });
+    // 'discount' is never touched, 'amount' is filled and then cleared again.
+    fireEvent.change(fieldOf(container, 'amount'), { target: { value: '' } });
+    const body = await submitForm(container);
+
+    expect(body.amount).toBeUndefined();
+    expect(body.discount).toBeUndefined();
+    // Not 0 and not NaN: NaN would survive @IsOptional() and fail validation, and JSON.stringify
+    // would turn it into null.
+    expect(JSON.parse(JSON.stringify(body))).not.toHaveProperty('amount');
+  });
+
+  it('sends a hidden numeric field as a number too', async () => {
+    const { container, getForm } = renderForm(NumberForm);
+
+    // How a hidden id is really filled: getDetailsData loads the record and calls setValue.
+    // Typing into it is not a path — React fires no onChange for type="hidden".
+    getForm().setValue('id', '17');
+    const body = await submitForm(container);
+
+    expect(typeof body.id).toBe('number');
+    expect(body.id).toBe(17);
+  });
+
+  it('converts the string defaultValue of a number field', async () => {
+    const { container } = renderForm(DefaultedNumberForm);
+    const body = await submitForm(container);
+
+    expect(typeof body.amount).toBe('number');
+    expect(body.amount).toBe(3);
+  });
+
+  it('leaves text fields alone', async () => {
+    const { container } = renderForm(NumberForm);
+
+    fireEvent.change(fieldOf(container, 'name'), { target: { value: '5' } });
+    const body = await submitForm(container);
+
+    expect(typeof body.name).toBe('string');
+    expect(body.name).toBe('5');
+  });
+
+  it('keeps a date field as the ISO string the input produces', async () => {
+    const { container } = renderForm(NumberForm);
+
+    fireEvent.change(fieldOf(container, 'startsAt'), { target: { value: '2026-08-16' } });
+    const body = await submitForm(container);
+
+    expect(typeof body.startsAt).toBe('string');
+    expect(body.startsAt).toBe('2026-08-16');
+    expect(body.startsAt instanceof Date).toBe(false);
+  });
+
+  it('passes a value set programmatically through untouched', async () => {
+    const { container, getForm } = renderForm(NumberForm);
+
+    // What getDetailsData does when it loads a record: the value is already a number.
+    getForm().setValue('amount', 12);
+    const body = await submitForm(container);
+
+    expect(body.amount).toBe(12);
+  });
+
+  it('still works for a model that declares @Type(() => Number)', async () => {
+    const { container } = renderForm(NumberForm);
+
+    fireEvent.change(fieldOf(container, 'amount'), { target: { value: '42' } });
+    const body = await submitForm(container);
+    const instance = plainToInstance(TypedNumberModel, { amount: body.amount });
+
+    expect(instance.amount).toBe(42);
+    expect(typeof instance.amount).toBe('number');
+  });
+});

package/src/__tests__/components/list/LinkCell.test.tsx

@@ -0,0 +1,70 @@
+/**
+ * @jest-environment jsdom
+ */
+import { TextDecoder, TextEncoder } from 'util';
+// react-router reads TextEncoder at import time and jsdom has none — set it up before the
+// imports below pull the router in.
+Object.assign(globalThis, { TextEncoder, TextDecoder });
+
+import 'reflect-metadata';
+import React from 'react';
+import { describe, expect, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { LinkCell } from '../../../components/list/cells/LinkCell';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+
+// `@LinkCell({ path: '/users/:id' })` satirin verisiyle dolmalı. Ikame bozulursa
+// hucredeki her open/edit linki gorunuste calisir ama tiklaninca 404 verir —
+// tarayicida fark edilmesi zor, o yuzden burada kilitli.
+const hrefOf = (configuration: CellConfiguration, item: Record<string, unknown>) =>
+  render(
+    <MemoryRouter>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <LinkCell configuration={configuration} item={item} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </MemoryRouter>
+  )
+    .container.querySelector('a')
+    ?.getAttribute('href');
+
+const linkCell = (over: Partial<CellConfiguration> = {}): CellConfiguration =>
+  ({
+    name: 'open',
+    type: 'link',
+    placeHolder: 'open',
+    ...over,
+  }) as CellConfiguration;
+
+describe('LinkCell path parameters', () => {
+  it('substitutes a single :param from the row', () => {
+    expect(hrefOf(linkCell({ path: '/users/:id' } as never), { id: 42 })).toBe(
+      '/users/42'
+    );
+  });
+
+  it('substitutes every :param in the path', () => {
+    expect(
+      hrefOf(linkCell({ path: '/workspaces/:workspaceId/users/:id' } as never), {
+        workspaceId: 'ws-1',
+        id: 7,
+      })
+    ).toBe('/workspaces/ws-1/users/7');
+  });
+
+  it('leaves an unmatched :param in place instead of writing undefined', () => {
+    expect(hrefOf(linkCell({ path: '/users/:missing' } as never), { id: 1 })).toBe(
+      '/users/:missing'
+    );
+  });
+
+  it('passes a path with no parameters through untouched', () => {
+    expect(hrefOf(linkCell({ path: '/users' } as never), { id: 1 })).toBe('/users');
+  });
+});

package/src/api/CrudApi.ts

@@ -64,7 +64,7 @@ export function update<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
 export function updateFormData<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
   return async (data: T | FormData): Promise<T> => {
     const axiosInstance = getAxiosInstance();
-    const id = (data as any)[key];
+    const id = (data as Record<string, unknown>)[key];
     const response = await axiosInstance.put<T>(`/${endpoint}/${id}`, data, {
       headers: {
         'Content-Type': 'multipart/form-data',
@@ -89,7 +89,7 @@ export function remove<T>(endpoint: string, key = 'id'): (data: T) => Promise<vo
     const id = (data as any)[key];
     await axiosInstance
       .delete<T>(`/${endpoint}/${id}`)
-      .then((res: any) => res.data)
+      .then(res => res.data)
       .catch((err: AxiosError) => {
         const messageError = err.response?.data as { message: string };
         if (messageError?.message) {

package/src/components/form/FormField.tsx

@@ -6,6 +6,7 @@ import { Checkbox } from './Checkbox';
 import { Label } from './Label';
 import { Select } from './Select';
 import { CustomField } from './CustomField';
+import { getFieldRegisterOptions } from './registerOptions';
 //NOTE: safe to import statically — RichTextField pulls the optional @tiptap/* peers in itself,
 // through a dynamic import, only once a richtext field is actually rendered.
 import { RichTextField } from './RichTextField';
@@ -94,7 +95,11 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
         return <CustomField input={input} fieldName={fieldName} error={error?.message} />;
       case 'input': {
         return (
-          <input type={input.inputType} {...register(fieldName)} placeholder={input.placeholder} />
+          <input
+            type={input.inputType}
+            {...register(fieldName, getFieldRegisterOptions(input.inputType))}
+            placeholder={input.placeholder}
+          />
         );
       }
       case 'file-upload':
@@ -102,7 +107,11 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
       case 'checkbox':
         return <Checkbox fieldName={fieldName} input={input} />;
       case 'hidden':
-        return <input type="hidden" {...register(fieldName)} />;
+        //NOTE: hidden fields go through the same conversion — a hidden id declared with
+        // inputType 'number' must reach onSubmit as a number, or it ends up in the URL as a string.
+        return (
+          <input type="hidden" {...register(fieldName, getFieldRegisterOptions(input.inputType))} />
+        );
       case 'nested':
         return <NestedFormFields fieldName={fieldName} input={input} register={register} />;
       default:

package/src/components/form/InnerForm.tsx

@@ -114,6 +114,12 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
                 : (() => {
                     const formData = new FormData(formRef.current!);
                     for (const key in dataForm) {
+                      //NOTE: an empty number field is `undefined` since register() converts it;
+                      // appending that would post the literal string 'undefined'. The DOM entry
+                      // for the field is already in formData, so skipping it loses nothing.
+                      if (dataForm[key] === undefined || dataForm[key] === null) {
+                        continue;
+                      }
                       if (!formData.get(key)) {
                         formData.append(key, dataForm[key]);
                       }

package/src/components/form/registerOptions.ts

@@ -0,0 +1,50 @@
+import { UseFormRegister } from 'react-hook-form';
+import { InputConfiguration } from '../../decorators/form/Input';
+
+//TODO: any is not a good solution, we need to find a better way to do this
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type FieldRegisterOptions = Parameters<UseFormRegister<any>>[1];
+
+/**
+ * The DOM hands every <input> value over as a string, number inputs included. Deciding what
+ * lands in the form body is this module's job — not the model author's: a forgotten
+ * `@Type(() => Number)` used to turn into a client-side `@IsInt()` error under the field, or a
+ * backend 400, with no visible cause. Checkbox already closed the same trap through
+ * `setValueAs`, see Checkbox.tsx.
+ */
+export function getFieldRegisterOptions(
+  inputType: InputConfiguration['inputType']
+): FieldRegisterOptions {
+  switch (inputType) {
+    case 'number':
+      return { setValueAs: toNumber };
+    case 'date':
+      //NOTE: DELIBERATELY not converted. A date field carries the native input's 'YYYY-MM-DD'
+      // string all the way to onSubmit, and an empty one carries ''. Existing consumers validate
+      // it with @IsString()/@IsISO8601() and post it as-is, so handing them a Date object here
+      // would break them silently. `valueAsDate` is intentionally unused.
+      return undefined;
+    default:
+      return undefined;
+  }
+}
+
+/**
+ * Empty means "no number given", so it becomes `undefined` rather than react-hook-form's own
+ * `valueAsNumber` result of NaN. NaN is neither null nor undefined, so `@IsOptional()` does not
+ * skip it and an untouched optional number field would start failing validation; `undefined` is
+ * skipped by `@IsOptional()`, dropped by JSON.stringify, and still fails a required `@IsInt()`
+ * with the error visible under the field. A non-empty value that is not a number is left to
+ * produce NaN on purpose — that is a real error and it must stay visible.
+ */
+function toNumber(value: unknown): number | undefined {
+  if (value === '' || value === null || value === undefined) {
+    return undefined;
+  }
+  // Already numeric: a value pushed in by getDetailsData or form.setValue passes through
+  // untouched, so models that do declare @Type(() => Number) keep working.
+  if (typeof value === 'number') {
+    return value;
+  }
+  return Number(value);
+}

package/src/components/list/cells/LinkCell.tsx

@@ -8,12 +8,32 @@ interface LinkCellProps<T> {
   configuration: CellConfiguration;
 }
 
+/**
+ * `@LinkCell({ path: '/users/:id' })` yazan model sahibi, satirin `id`'siyle dolmus
+ * bir adres bekliyor — router path'i zaten oyle okunuyor. Ikame edilmezse `:id`
+ * harfi harfine adrese giriyor ve hucredeki her open/edit linki 404'e cikiyor:
+ * gorunuste calisan, tiklaninca bozuk bir link. Eslesmeyen bir parametre oldugu
+ * gibi birakilir (silinmez) — boylece eksik alan gorunur kalir, sessizce
+ * `/users/undefined` uretilmez.
+ */
+function resolvePath<T>(path: string, item: T): string {
+  return path.replace(/:(\w+)/g, (match, key: string) => {
+    const value = (item as Record<string, unknown>)[key];
+    return value != null ? String(value) : match;
+  });
+}
+
 export function LinkCell<T>({ item, configuration }: LinkCellProps<T>) {
   const linkConfiguration = configuration as LinkCellConfiguration<T>;
   const value = item[configuration.name as keyof T] ?? 'Link';
 
   return (
-    <Link to={linkConfiguration.path ?? linkConfiguration.url ?? ''}>
+    <Link
+      to={resolvePath(
+        linkConfiguration.path ?? linkConfiguration.url ?? '',
+        item
+      )}
+    >
       {linkConfiguration.onClick ? (
         <a
           className="util-cell-link"