proje-react-panel 1.9.0 → 1.11.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.9.0",
+  "version": "1.11.0-beta.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",

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/CellField.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * @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 { CellField } from '../../../components/list/CellField';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+
+// Tablo `table-layout: fixed` kullaniyor: kolon genisligi sabit ve tasan metin
+// ellipsis'e dusuyor. Kesilen degeri okumanin tek yolu hucrenin tooltip'i.
+const cell = (over: Partial<CellConfiguration> = {}): CellConfiguration => ({
+  name: 'description',
+  type: 'string',
+  ...over,
+});
+
+const titleOf = (configuration: CellConfiguration, item: Record<string, unknown>) =>
+  render(
+    // Link hucresi react-router'in <Link>'ini basiyor, o da router context'i istiyor.
+    <MemoryRouter>
+      <table>
+        <tbody>
+          <tr>
+            <CellField configuration={configuration} item={item} />
+          </tr>
+        </tbody>
+      </table>
+    </MemoryRouter>
+  )
+    .container.querySelector('td')
+    ?.getAttribute('title');
+
+describe("CellField — hucre tooltip'u", () => {
+  it('metin hucresinde tam degeri title olarak verir', () => {
+    const uzun = 'a'.repeat(400);
+
+    expect(titleOf(cell(), { description: uzun })).toBe(uzun);
+  });
+
+  it('metin olmayan degerleri yaziya cevirir', () => {
+    expect(titleOf(cell({ type: 'number' }), { description: 42 })).toBe('42');
+  });
+
+  // Bu hucreler metin degil element basiyor; ham url'i tooltip yapmak
+  // kullaniciya bir sey anlatmiyor, yalnizca gurultu olurdu.
+  it.each(['image', 'download', 'link'] as const)('%s hucresinde title vermez', type => {
+    expect(titleOf(cell({ type, name: 'thumbnailUrl' }), { thumbnailUrl: '/uploads/x.png' })).toBe(
+      null
+    );
+  });
+
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+    ['nesne', { a: 1 }],
+  ])('%s degerde title vermez', (_ad, value) => {
+    expect(titleOf(cell(), { description: value })).toBe(null);
+  });
+});

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/CellField.tsx

@@ -48,6 +48,7 @@ export function CellField<T extends AnyClass>({
   return (
     <td
       key={configuration.name}
+      title={cellTitle(configuration, item)}
       style={{
         minWidth,
         width,
@@ -57,3 +58,26 @@ export function CellField<T extends AnyClass>({
     </td>
   );
 }
+
+/**
+ * Sabit kolon genisliginde uzun metin ellipsis'e dusuyor ve tam degeri okumanin
+ * tek yolu hover kaliyor. Gorsel/indirme/link hucrelerinde metin degil element
+ * basildigi icin ham degeri tooltip yapmak yalnizca gurultu olurdu.
+ */
+function cellTitle<T extends AnyClass>(
+  configuration: CellConfiguration,
+  item: T
+): string | undefined {
+  if (
+    configuration.type === 'image' ||
+    configuration.type === 'download' ||
+    configuration.type === 'link'
+  ) {
+    return undefined;
+  }
+  const value = item[configuration.name];
+  if (value === null || value === undefined || typeof value === 'object') {
+    return undefined;
+  }
+  return String(value);
+}

package/src/components/list/Datagrid.tsx

@@ -11,6 +11,13 @@ import { CellField } from './CellField';
 import { CellConfiguration } from '../../decorators/list/Cell';
 import { useAppStore } from '../../store/store';
 
+/**
+ * Otomatik duzende bu deger yalnizca bir ipucuydu; tarayici "Actions" etiketi
+ * sigsin diye kolonu kendisi buyutuyordu. `table-layout: fixed` ile genislik
+ * birebir uygulaniyor, dolayisiyla eski 30px etiketi kirpiyor.
+ */
+const ACTIONS_COLUMN_WIDTH = '120px';
+
 interface DatagridProps<T extends AnyClass> {
   data: T[];
   listPageMeta: ListPageMeta<T>;
@@ -49,7 +56,9 @@ export function Datagrid<T extends AnyClass>({
               {(listActions?.details ||
                 listActions?.edit ||
                 listActions?.delete ||
-                listActions?.customActions?.length) && <th style={{ width: '30px' }}>Actions</th>}
+                listActions?.customActions?.length) && (
+                <th style={{ width: ACTIONS_COLUMN_WIDTH }}>Actions</th>
+              )}
             </tr>
           </thead>
           <tbody>
@@ -80,7 +89,7 @@ export function Datagrid<T extends AnyClass>({
                     );
                   })}
                   {(listCells?.details || listCells?.edit || listCells?.delete) && (
-                    <td style={{ width: '30px' }}>
+                    <td className="util-cell-actions-cell" style={{ width: ACTIONS_COLUMN_WIDTH }}>
                       <div className="util-cell-actions">
                         <p className="util-cell-actions-label">
                           Actions <DownArrowIcon className="icon icon-down" />

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

@@ -14,11 +14,14 @@ export function ImageCell({ item, configuration }: ImageCellProps) {
   if (!value) return <>-</>;
 
   return (
+    // maxWidth sart: sabit tablo duzeninde kolon 100px'ten dar kalabiliyor ve
+    // hucre tasmayi kirptigi icin gorsel sessizce yarim gorunurdu. Kucultmek
+    // kirpmaktan iyi; objectFit: contain oranı koruyor.
     <img
       width={100}
       height={100}
       src={imageConfiguration.baseUrl + value}
-      style={{ objectFit: 'contain' }}
+      style={{ objectFit: 'contain', maxWidth: '100%' }}
       alt=""
     />
   );

package/src/decorators/list/Cell.ts

@@ -23,7 +23,16 @@ export interface CellOptions {
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
   style?: {
+    /**
+     * @deprecated Tablo `table-layout: fixed` kullaniyor; sabit duzende hucre
+     * `min-width`'i kolon genisligini etkilemiyor (CSS 2.1 17.5.2.1). Bunun
+     * yerine `width` verin.
+     */
     minWidth?: string;
+    /**
+     * Kolon genisligi. Sabit duzende birebir uygulanir; yuzde vermek tabloyu
+     * konteynere sigdirir, px vermek toplam konteyneri asarsa yatay scroll acar.
+     */
     width?: string;
   };
 }

package/src/styles/list.scss

@@ -86,8 +86,17 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     @include custom-scrollbar;
   }
 
+  // `width` sart: `table-layout: fixed`, genislik `auto` kaldigi surece devreye
+  // girmiyor (CSS 2.1 17.5.2.1) ve tarayici otomatik duzene doner. Burada eskiden
+  // sadece `min-width: 100%` vardi, yani sabit duzen hic calismiyordu: nowrap
+  // hucreler kolonu icerik kadar sisiriyor, tablo konteyneri asiyor ve uzun
+  // metin tasiyan her liste yatay scroll aciyordu.
+  //
+  // Kolonlarina px genislik veren tuketiciler genis tabloyu kaybetmiyor: sabit
+  // duzende kullanilan tablo genisligi, belirtilen kolon genisliklerinin toplami
+  // ile bu %100 degerinin buyugudur.
   .datagrid-table {
-    min-width: 100%;
+    width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
     position: relative;
@@ -97,10 +106,19 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid var(--prp-border-primary);
+      // `text-overflow` yalnizca tasma kirpildiginda is goruyor; `overflow`
+      // olmadan ellipsis hicbir zaman cizilmiyordu.
+      overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    // Actions hucresindeki acilir liste `position: absolute`; kirpilirsa menu
+    // gorunmez oluyor. Kirpma sadece metin kolonlari icin gerekli.
+    .util-cell-actions-cell {
+      overflow: visible;
+    }
+
     th {
       color: var(--prp-text-primary);
       background-color: var(--prp-bg-tertiary);