proje-react-panel 1.2.0 → 1.3.0

package/src/__tests__/utils/PreloadCacheHelper.test.ts

@@ -1,13 +1,10 @@
-import { OnPreload, OnResult, preloadCacheHelper } from '../../utils/PreloadCacheHelper';
+import { OnResult, preloadCacheHelper } from '../../utils/PreloadCacheHelper';
 import { SelectPreloader } from '../../decorators/form/inputs/SelectInput';
 import { describe, expect, it, beforeEach, jest } from '@jest/globals';
 
 interface CacheMap {
   cache: Map<SelectPreloader<unknown>, { label: string; value: unknown }[]>;
-  asyncQueue: Map<
-    SelectPreloader<unknown>,
-    ((result: { label: string; value: unknown }[]) => Promise<void>)[]
-  >;
+  asyncQueue: Map<SelectPreloader<unknown>, OnResult<unknown>[]>;
 }
 
 describe('PreloadCacheHelper', () => {
@@ -20,33 +17,28 @@ describe('PreloadCacheHelper', () => {
   // Generated by AI
   it('should cache and return results for the same key', async () => {
     const mockSelectPreloaderKey = jest.fn() as SelectPreloader<number>;
-    const mockOnPreload = jest
-      .fn<OnPreload<number>>()
-      .mockResolvedValue([{ label: 'Test', value: 1 }]);
     const mockOnResult = jest.fn<OnResult<number>>().mockImplementation(() => {
       return Promise.resolve();
     });
 
-    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult, mockOnPreload);
-    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult, mockOnPreload);
+    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult);
+    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult);
 
-    expect(mockSelectPreloaderKey).toHaveBeenCalledTimes(0);
-    expect(mockOnPreload).toHaveBeenCalledTimes(1);
+    expect(mockSelectPreloaderKey).toHaveBeenCalledTimes(1);
     expect(mockOnResult).toHaveBeenCalledTimes(2);
   });
 
   // Generated by AI
   it('should handle preload errors gracefully', async () => {
-    const mockSelectPreloaderKey = jest.fn() as SelectPreloader<number>;
-    const mockOnPreload = jest
-      .fn<OnPreload<number>>()
+    const mockSelectPreloaderKey = jest
+      .fn<SelectPreloader<number>>()
       .mockRejectedValue(new Error('Preload failed'));
     const mockOnResult = jest
       .fn<OnResult<number>>()
       .mockImplementation(async () => Promise.resolve());
 
     await expect(
-      preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult, mockOnPreload)
+      preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult)
     ).rejects.toThrow('Preload failed');
 
     expect(mockOnResult).not.toHaveBeenCalled();
@@ -55,14 +47,11 @@ describe('PreloadCacheHelper', () => {
   // Generated by AI
   it('should clear async queue after successful preload', async () => {
     const mockSelectPreloaderKey = jest.fn() as SelectPreloader<number>;
-    const mockOnPreload = jest
-      .fn<OnPreload<number>>()
-      .mockResolvedValue([{ label: 'Test', value: 1 }]);
     const mockOnResult = jest
       .fn<OnResult<number>>()
       .mockImplementation(async () => Promise.resolve());
 
-    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult, mockOnPreload);
+    await preloadCacheHelper.setOrGetCache(mockSelectPreloaderKey, mockOnResult);
 
     expect((preloadCacheHelper as unknown as CacheMap).asyncQueue.has(mockSelectPreloaderKey)).toBe(
       false

package/src/components/Login.tsx

@@ -1,86 +1,7 @@
 import React from 'react';
-import { useForm } from 'react-hook-form';
-import { FormField } from './form/FormField';
-import { useNavigate } from 'react-router';
-import { useAppStore } from '../store/store';
+import { FormPage, FormPageProps } from './form/FormPage';
+import { AnyClass } from '../types/AnyClass';
 
-interface LoginFormData {
-  username: string;
-  password: string;
-}
-
-export interface OnLogin {
-  login: (username: string, password: string) => Promise<LoginResponse>;
-}
-
-interface LoginResponse {
-  //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
-  user: any;
-  token: string;
-}
-
-interface LoginProps {
-  onLogin: OnLogin;
-}
-
-export function Login({ onLogin }: LoginProps) {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<LoginFormData>();
-  const navigate = useNavigate();
-  const onSubmit = async (data: LoginFormData) => {
-    onLogin.login(data.username, data.password).then((dataInner: LoginResponse) => {
-      const { user, token } = dataInner;
-      localStorage.setItem('token', token);
-      useAppStore.getState().login(user);
-      navigate('/');
-    });
-  };
-
-  return (
-    <div className="login-container">
-      <div className="login-panel">
-        <div className="login-header">
-          <h1>Welcome Back</h1>
-          <p>Please sign in to continue</p>
-        </div>
-        <form onSubmit={handleSubmit(onSubmit)} className="login-form">
-          <FormField
-            input={{
-              name: 'username',
-              label: 'Username',
-              placeholder: 'Enter your username',
-              type: 'input',
-              inputType: 'text',
-              includeInCSV: true,
-              includeInJSON: true,
-            }}
-            register={register}
-            error={errors.username}
-          />
-          <FormField
-            input={{
-              name: 'password',
-              label: 'Password',
-              inputType: 'password',
-              placeholder: 'Enter your password',
-              type: 'input',
-              includeInCSV: true,
-              includeInJSON: true,
-            }}
-            register={register}
-            error={errors.password}
-          />
-          <div className="form-actions">
-            <button type="submit" className="submit-button">
-              Sign In
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
+export function Login<T extends AnyClass>(props: FormPageProps<T>) {
+  return <FormPage className="login-form" {...props} />;
 }

package/src/components/Panel.tsx

@@ -1,16 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ErrorBoundary } from './ErrorBoundary';
 import { ToastContainer } from 'react-toastify';
 
 interface AppProps {
+  onInit?: (appData: { token?: string }) => void;
   children: React.ReactNode;
 }
 
-export function Panel({ children }: AppProps) {
-  /*useEffect(() => {
-    const options = init();
-    initPanel(options);
-  }, [init]);*/
+export function Panel({ onInit, children }: AppProps) {
+  useEffect(() => {
+    if (onInit) {
+      const token = localStorage.getItem('token');
+      const params: { token?: string } = { token: '' };
+      if (token) {
+        params.token = token;
+      }
+      onInit(params);
+    }
+  }, [onInit]);
 
   return (
     <ErrorBoundary>

package/src/components/form/Checkbox.tsx

@@ -5,22 +5,23 @@ import { Label } from './Label';
 
 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   input: InputConfiguration;
+  fieldName: string;
 }
 
 //TODO2:
-export function Checkbox({ input, ...props }: CheckboxProps) {
-  const { label, name } = input;
+export function Checkbox({ input, fieldName, ...props }: CheckboxProps) {
+  const { label } = input;
   const form = useFormContext();
   const { register } = form;
 
   return (
-    <Label className="checkbox-label" htmlFor={name} label={label} fieldName={name}>
+    <Label className="checkbox-label" htmlFor={fieldName} label={label} fieldName={fieldName}>
       <input
         type="checkbox"
-        id={name}
+        id={fieldName}
         className="apple-switch"
         {...props}
-        {...register(name, {
+        {...register(fieldName, {
           setValueAs: (value: string) => value === 'on',
         })}
       />

package/src/components/form/FormField.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { InputConfiguration } from '../../decorators/form/Input';
 import { useFormContext, UseFormRegister } from 'react-hook-form';
 import { Uploader } from './Uploader';
@@ -20,13 +20,13 @@ interface NestedFormFieldsProps {
   //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
   register: UseFormRegister<any>;
+  fieldName: string;
 }
 
-function NestedFormFields({ input, register }: NestedFormFieldsProps) {
+function NestedFormFields({ input, register, fieldName }: NestedFormFieldsProps) {
   const form = useFormContext();
   //TODO: inputOptions İnputResult seperate
-  const data = form.getValues(input.name!);
-  console.log('--_>', data, input, input.nestedFields);
+  const data = form.getValues(fieldName);
   return (
     <div>
       {/* TODO: any is not a good solution, we need to find a better way to do this */}
@@ -36,12 +36,12 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
           {input.nestedFields?.map((nestedInput: InputConfiguration) => (
             <FormField
               key={nestedInput.name?.toString() ?? ''}
-              baseName={input.name + '[' + index + ']'}
+              baseName={fieldName + '[' + index + ']'}
               input={nestedInput}
               register={register}
               error={
                 input.name
-                  ? { message: (form.formState.errors[input.name] as { message: string })?.message }
+                  ? { message: (form.formState.errors[fieldName] as { message: string })?.message }
                   : undefined
               }
             />
@@ -54,53 +54,37 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
 
 export function FormField({ input, register, error, baseName }: FormFieldProps) {
   const fieldName: string = (baseName ? baseName.toString() + '.' : '') + input.name || '';
-  //TODO: support rest default values
-  const renderField = () => {
+  const renderedField = useMemo(() => {
     switch (input.type) {
       case 'textarea':
-        return (
-          <textarea
-            defaultValue={input.defaultValue}
-            {...register(fieldName, {
-              value: input.defaultValue,
-            })}
-            placeholder={input.placeholder}
-          />
-        );
+        return <textarea {...register(fieldName)} placeholder={input.placeholder} />;
       case 'select':
         return <Select input={input} fieldName={fieldName} />;
       case 'input': {
         return (
-          <input
-            type={input.inputType}
-            defaultValue={input.defaultValue}
-            {...register(fieldName, {
-              value: input.defaultValue,
-            })}
-            placeholder={input.placeholder}
-          />
+          <input type={input.inputType} {...register(fieldName)} placeholder={input.placeholder} />
         );
       }
       case 'file-upload':
-        return <Uploader input={input} />;
+        return <Uploader fieldName={fieldName} input={input} />;
       case 'checkbox':
-        return <Checkbox input={input} />;
+        return <Checkbox fieldName={fieldName} input={input} />;
       case 'hidden':
         return <input type="hidden" {...register(fieldName)} />;
       case 'nested':
-        return <NestedFormFields input={input} register={register} />;
+        return <NestedFormFields fieldName={fieldName} input={input} register={register} />;
       default:
         return null;
     }
-  };
+  }, [input, register, fieldName]);
 
   return (
     <div className="form-field">
-      {input.type !== 'checkbox' && (
+      {input.type !== 'hidden' && input.type !== 'checkbox' && (
         <Label htmlFor={fieldName} label={input.label} fieldName={fieldName} />
       )}
-      {renderField()}
-      {error && <span className="error-message">{error.message}</span>}
+      {renderedField}
+      {error && input.type !== 'hidden' && <span className="error-message">{error.message}</span>}
     </div>
   );
 }

package/src/components/form/FormPage.tsx

@@ -2,7 +2,15 @@ import React, { useEffect, useMemo } from 'react';
 import { InnerForm } from './InnerForm';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { useParams } from 'react-router';
-import { FormProvider, Resolver, useForm, UseFormReturn, Path, PathValue } from 'react-hook-form';
+import {
+  FormProvider,
+  Resolver,
+  useForm,
+  UseFormReturn,
+  Path,
+  PathValue,
+  DefaultValues,
+} from 'react-hook-form';
 import { getFormPageMeta } from '../../decorators/form/getFormPageMeta';
 import { FormHeader } from './FormHeader';
 import { InputConfiguration } from '../../decorators/form/Input';
@@ -21,6 +29,7 @@ export interface FormPageProps<T extends AnyClass> {
   title?: string;
   documentTitle?: string;
   header?: (utils: FormUtils<T>) => React.ReactNode;
+  className?: string;
 }
 
 function useCreateFormUtils<T extends AnyClass>(
@@ -142,11 +151,19 @@ export function FormPage<T extends AnyClass>({
   title,
   documentTitle,
   header,
+  className,
 }: FormPageProps<T>) {
   const { class: formClass, inputs, resolver } = useMemo(() => getFormPageMeta(model), [model]);
   const params = useParams();
   const form = useForm<T>({
     resolver: resolver as Resolver<T>,
+    defaultValues: inputs.reduce(
+      (acc, input) => {
+        acc[input.name] = input.defaultValue;
+        return acc;
+      },
+      {} as Record<string, unknown>
+    ) as DefaultValues<T>,
   });
   const utils = useCreateFormUtils(inputs, form);
 
@@ -165,9 +182,11 @@ export function FormPage<T extends AnyClass>({
   }, [params, form.reset, formClass.getDetailsData, formClass, form]);
 
   return (
-    <FormProvider {...form}>
-      <FormHeader title={title} utils={utils} header={header} />
-      <InnerForm inputs={inputs} formClass={formClass} />
-    </FormProvider>
+    <div className={`form-wrapper ${className ?? ''}`}>
+      <FormProvider {...form}>
+        <FormHeader title={title} utils={utils} header={header} />
+        <InnerForm inputs={inputs} formClass={formClass} />
+      </FormProvider>
+    </div>
   );
 }

package/src/components/form/InnerForm.tsx

@@ -21,81 +21,82 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
   const loadingRef = useRef(false);
 
   return (
-    <div className="form-wrapper">
-      <form
-        ref={formRef}
-        onSubmit={form.handleSubmit(
-          async (dataForm: T) => {
-            if (loadingRef.current) return;
-            loadingRef.current = true;
-            try {
-              const data =
-                formClass.type === 'json'
-                  ? dataForm
-                  : (() => {
-                      const formData = new FormData(formRef.current!);
-                      for (const key in dataForm) {
-                        if (!formData.get(key)) {
-                          formData.append(key, dataForm[key]);
-                        }
+    <form
+      ref={formRef}
+      onSubmit={form.handleSubmit(
+        async (dataForm: T) => {
+          if (loadingRef.current) return;
+          loadingRef.current = true;
+          try {
+            const data =
+              formClass.type === 'json'
+                ? dataForm
+                : (() => {
+                    const formData = new FormData(formRef.current!);
+                    for (const key in dataForm) {
+                      if (!formData.get(key)) {
+                        formData.append(key, dataForm[key]);
                       }
-                      return formData;
-                    })();
-              const resut = await formClass.onSubmit(data);
-              form.reset(resut);
-              setErrorMessage(null);
-              toast.success('Form submitted successfully');
-              //TODO: https path or relative path
-              if (formClass.redirectSuccessUrl) {
-                navigate(formClass.redirectSuccessUrl);
-              }
-            } catch (error: unknown) {
-              const errorResponse = error as { response?: { data?: { message?: string } } };
-              const message =
-                errorResponse?.response?.data?.message ||
-                (error instanceof Error ? error.message : 'An error occurred');
-              toast.error('Something went wrong');
-              setErrorMessage(message);
-              console.error(error);
-            } finally {
-              loadingRef.current = false;
+                    }
+                    return formData;
+                  })();
+            const resut = await formClass.onSubmit(data);
+            form.reset(resut);
+            setErrorMessage(null);
+            toast.success('Form submitted successfully');
+            //TODO: https path or relative path
+            if (formClass.redirectSuccessUrl) {
+              navigate(formClass.redirectSuccessUrl);
+            }
+            if (formClass.onSubmitSuccess) {
+              formClass.onSubmitSuccess(resut);
             }
-          },
-          (errors, event) => {
-            //TOOD: put error if useer choose global error
-            console.log('error creating creation', errors, event);
+          } catch (error: unknown) {
+            const errorResponse = error as { response?: { data?: { message?: string } } };
+            const message =
+              errorResponse?.response?.data?.message ||
+              (error instanceof Error ? error.message : 'An error occurred');
+            toast.error('Something went wrong');
+            setErrorMessage(message);
+            console.error(error);
+          } finally {
+            loadingRef.current = false;
           }
+        },
+        (errors, event) => {
+          //TOOD: put error if useer choose global error
+          console.error('error creating creation', errors, event);
+        }
+      )}
+    >
+      <div>
+        {errorMessage && (
+          <div className="error-message" style={{ color: 'red', marginBottom: '1rem' }}>
+            {errorMessage}
+          </div>
         )}
-      >
-        <div>
-          {errorMessage && (
-            <div className="error-message" style={{ color: 'red', marginBottom: '1rem' }}>
-              {errorMessage}
-            </div>
-          )}
-          {inputs?.map((input: InputConfiguration) => (
-            <FormField
-              key={input.name || ''}
-              input={input}
-              register={form.register}
-              error={
-                input.name
-                  ? {
-                      message: (
-                        form.formState.errors[input.name as keyof T] as {
-                          message: string;
-                        }
-                      )?.message,
-                    }
-                  : undefined
-              }
-            />
-          ))}
-          <button type="submit" className="submit-button">
-            Submit
-          </button>
-        </div>
-      </form>
-    </div>
+        {inputs?.map((input: InputConfiguration) => (
+          <FormField
+            key={input.name || ''}
+            input={input}
+            register={form.register}
+            error={
+              input.name
+                ? {
+                    message: (
+                      form.formState.errors[input.name as keyof T] as {
+                        message: string;
+                      }
+                    )?.message,
+                  }
+                : undefined
+            }
+          />
+        ))}
+        <button type="submit" className="submit-button">
+          Submit
+        </button>
+      </div>
+    </form>
   );
 }

package/src/components/form/Select.tsx

@@ -4,6 +4,7 @@ import { useFormContext, Controller } from 'react-hook-form';
 import { SelectInputConfiguration } from '../../decorators/form/inputs/SelectInput';
 import ReactSelect from 'react-select';
 import { darkSelectStyles } from './SelectStyles';
+import { preloadCacheHelper } from '../../utils/PreloadCacheHelper';
 
 interface SelectProps {
   input: InputConfiguration;
@@ -23,9 +24,9 @@ export function Select<TValue>({ input, fieldName }: SelectProps) {
   const styles = useMemo(() => darkSelectStyles<TValue>(), []);
   useEffect(() => {
     if (inputSelect.onSelectPreloader) {
-      const
-      inputSelect.onSelectPreloader().then(option => {
-        setOptions(option);
+      const onSelectPreloader = inputSelect.onSelectPreloader;
+      preloadCacheHelper.setOrGetCache(onSelectPreloader, (options: OptionType<TValue>[]) => {
+        setOptions(options);
       });
     }
   }, [inputSelect, inputSelect.onSelectPreloader]);

package/src/components/form/Uploader.tsx

@@ -5,17 +5,18 @@ import { InputConfiguration } from '../../decorators/form/Input';
 interface UploaderProps {
   input: InputConfiguration;
   maxLength?: number;
+  fieldName: string;
 }
 
-export function Uploader({ input, maxLength = 1 }: UploaderProps) {
+export function Uploader({ input, maxLength = 1, fieldName }: UploaderProps) {
   const form = useFormContext();
   const [files, setFiles] = useState<File[]>([]);
-  const id = input.name!;
+  const id = fieldName;
 
   useEffect(() => {
     // Update form value whenever files change
-    form.setValue(input.name + '_files', files.length > 0);
-  }, [files, form, input.name]);
+    form.setValue(fieldName + '_files', files.length > 0);
+  }, [files, form, fieldName]);
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (maxLength > 1) {

package/src/decorators/form/Form.ts

@@ -3,23 +3,25 @@ import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { GetDetailsDataFN } from '../details/Details';
 
 const DETAILS_METADATA_KEY = 'DetailsMetaData';
-export type OnSubmitFN<T> = (data: T | FormData) => Promise<T>;
+export type OnSubmitFN<T, L = T> = (data: T | FormData) => Promise<L>;
 
-interface FormOptions<T extends AnyClass> {
-  onSubmit: OnSubmitFN<T>;
+interface FormOptions<T extends AnyClass, L = T> {
+  onSubmit: OnSubmitFN<T, L>;
+  onSubmitSuccess?: (data: L) => void;
   getDetailsData?: GetDetailsDataFN<T>;
   type?: 'json' | 'formData';
   redirectSuccessUrl?: string;
 }
 
-export interface FormConfiguration<T extends AnyClass> {
-  onSubmit: OnSubmitFN<T>;
+export interface FormConfiguration<T extends AnyClass, L = T> {
+  onSubmit: OnSubmitFN<T, L>;
+  onSubmitSuccess?: (data: L) => void;
   getDetailsData?: GetDetailsDataFN<T>;
   type: 'json' | 'formData';
   redirectSuccessUrl?: string;
 }
 
-export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {
+export function Form<T extends AnyClass, L = T>(options?: FormOptions<T, L>): ClassDecorator {
   return (target: object) => {
     if (options) {
       Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
@@ -27,18 +29,19 @@ export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorat
   };
 }
 
-export function getFormConfiguration<T extends AnyClass, K extends AnyClassConstructor<T>>(
+export function getFormConfiguration<T extends AnyClass, K extends AnyClassConstructor<T>, L = T>(
   entityClass: K
-): FormConfiguration<T> {
-  const formOptions: FormOptions<T> = Reflect.getMetadata(
+): FormConfiguration<T, L> {
+  const formOptions: FormOptions<T, L> = Reflect.getMetadata(
     DETAILS_METADATA_KEY,
     entityClass as object
   );
   if (!formOptions) {
     throw new Error('Form decerator should be used on class');
   }
-  const formConfiguration: FormConfiguration<T> = {
+  const formConfiguration: FormConfiguration<T, L> = {
     onSubmit: formOptions.onSubmit,
+    onSubmitSuccess: formOptions.onSubmitSuccess,
     getDetailsData: formOptions.getDetailsData,
     type: formOptions.type ?? 'json',
     redirectSuccessUrl: formOptions.redirectSuccessUrl,