proje-react-panel 1.1.4 → 1.1.6

package/eslint.config.mjs

@@ -0,0 +1,60 @@
+import { defineConfig } from 'eslint/config';
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+import globals from 'globals';
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig(
+  eslint.configs.recommended,
+  tseslint.configs.recommended,
+  tseslint.configs.stylistic,
+  [
+    {
+      languageOptions: {
+        globals: {
+          ...globals.browser,
+          ...globals.nodeBuiltin,
+        },
+      },
+      extends: fixupConfigRules(
+        compat.extends(
+          'plugin:react/recommended',
+          'plugin:react-hooks/recommended'
+        )
+      ),
+
+      plugins: {
+        react: fixupPluginRules(react),
+        'react-hooks': fixupPluginRules(reactHooks),
+      },
+
+      settings: {
+        react: {
+          version: 'detect',
+        },
+      },
+
+      rules: {
+        'react/function-component-definition': ['error'],
+        'import/prefer-default-export': 'off',
+        'react/prefer-stateless-function': 'error',
+        'react/no-this-in-sfc': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+      },
+    },
+  ]
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -12,8 +12,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c",
-    "lint": "eslint src --ext .ts,.tsx",
-    "generate-font": "node src/scripts/svg-to-font.js"
+    "lint": "eslint src --ext .ts,.tsx"
   },
   "repository": {
     "type": "git",
@@ -26,6 +25,7 @@
   "homepage": "https://github.com/demirsefa/proje-react-panel#readme",
   "dependencies": {},
   "devDependencies": {
+    "@eslint/compat": "^1.2.9",
     "@hookform/resolvers": "^4.1.3",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -37,6 +37,8 @@
     "class-validator": "^0.14.1",
     "eslint": "^9.24.0",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "prettier-eslint": "^16.3.0",
     "react": "^19.0.0",
@@ -52,6 +54,7 @@
     "rollup-plugin-typescript2": "^0.36.0",
     "svgicons2svgfont": "^15.0.1",
     "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.1",
     "use-sync-external-store": "^1.4.0",
     "zustand": "^5.0.3"
   },

package/src/api/CrudApi.ts

@@ -1,59 +1,65 @@
 interface FetchOptions {
-	token: string;
-	baseUrl: string;
+  token: string;
+  baseUrl: string;
 }
 
 export const CrudApi = {
-	getList: (options: FetchOptions, api: string) => {
-		return fetch(`${options.baseUrl}/${api}`, {
-			method: "GET",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			if (res.ok) {
-				return res.json();
-			}
-			throw res;
-		});
-	},
-	create: (options: FetchOptions, api: string, data: any) => {
-		const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-		// Don't set Content-Type for FormData
-		if (!(data instanceof FormData)) {
-			headers["Content-Type"] = "application/json";
-		}
+  getList: (options: FetchOptions, api: string) => {
+    return fetch(`${options.baseUrl}/${api}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      if (res.ok) {
+        return res.json();
+      }
+      throw res;
+    });
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  create: (options: FetchOptions, api: string, data: any) => {
+    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
+    // Don't set Content-Type for FormData
+    if (!(data instanceof FormData)) {
+      headers['Content-Type'] = 'application/json';
+    }
 
-		return fetch(`${options?.baseUrl ?? ""}/${api}`, {
-			method: "POST",
-			headers,
-			body: data instanceof FormData ? data : JSON.stringify(data),
-		}).then((res) => res.json());
-	},
-	details: (options: FetchOptions, api: string, id: any) => {
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${id}`, {
-			method: "GET",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			return res.json();
-		});
-	},
-	edit: (options: FetchOptions, api: string, data: any) => {
-		const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-		// Don't set Content-Type for FormData
-		if (!(data instanceof FormData)) {
-			headers["Content-Type"] = "application/json";
-		}
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${data.id}`, {
-			method: "PUT",
-			headers,
-			body: data instanceof FormData ? data : JSON.stringify(data),
-		}).then((res) => res.json());
-	},
-	delete: (options: FetchOptions, api: string, id: string) => {
-		return fetch(`${options?.baseUrl ?? ""}/${api}/${id}`, {
-			method: "DELETE",
-			headers: { "Content-Type": "application/json", Authorization: `Bearer ${options.token}` },
-		}).then((res) => {
-			return res.clone().json();
-		});
-	},
+    return fetch(`${options?.baseUrl ?? ''}/${api}`, {
+      method: 'POST',
+      headers,
+      body: data instanceof FormData ? data : JSON.stringify(data),
+    }).then(res => res.json());
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  details: (options: FetchOptions, api: string, id: any) => {
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      return res.json();
+    });
+  },
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  edit: (options: FetchOptions, api: string, data: any) => {
+    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
+    // Don't set Content-Type for FormData
+    if (!(data instanceof FormData)) {
+      headers['Content-Type'] = 'application/json';
+    }
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${data.id}`, {
+      method: 'PUT',
+      headers,
+      body: data instanceof FormData ? data : JSON.stringify(data),
+    }).then(res => res.json());
+  },
+  delete: (options: FetchOptions, api: string, id: string) => {
+    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
+      method: 'DELETE',
+      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
+    }).then(res => {
+      return res.clone().json();
+    });
+  },
 };

package/src/components/DetailsPage.tsx

@@ -1,19 +1,19 @@
 import { useParams } from 'react-router';
 import React, { useEffect, useId, useMemo, useState } from 'react';
 import { ErrorComponent } from './ErrorComponent';
-import { AnyClass } from '../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 import { getDetailsPageMeta } from '../decorators/details/getDetailsPageMeta';
 import { LoadingScreen } from './LoadingScreen';
 
 interface DetailsPageProps<T extends AnyClass> {
-  model: new (...args: any[]) => T;
+  model: AnyClassConstructor<T>;
 }
 
 export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>) {
   const id = useId();
   const { class: detailsClass, items } = useMemo(() => getDetailsPageMeta(model), [model]);
   const params = useParams();
-  const [data, setData] = useState<any>(null);
+  const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
 
@@ -21,11 +21,13 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
     detailsClass
       .getDetailsData(params as Record<string, string>)
       .then(data => {
-        setData(data);
+        //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
+        setData(data as any);
       })
       .catch(setError)
       .finally(() => setLoading(false));
-  }, [params, detailsClass?.getDetailsData]);
+  }, [params, detailsClass.getDetailsData, detailsClass]);
 
   if (error) {
     return (
@@ -48,7 +50,7 @@ export function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>)
       {items.map(item => (
         <div key={item.name} className="details-item">
           <div className="item-label">{item.name}</div>
-          <div className="item-value">{data[item.name]}</div>
+          <div className="item-value">{data?.[item.name]}</div>
         </div>
       ))}
     </div>

package/src/components/Login.tsx

@@ -9,12 +9,14 @@ interface LoginFormData {
   password: string;
 }
 
-export type OnLogin = {
+export interface OnLogin {
   login: (username: string, password: string) => Promise<LoginResponse>;
-};
+}
 
 interface LoginResponse {
-  user: any; // Replace with proper user type if available
+  //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;
 }
 
@@ -33,7 +35,7 @@ export function Login({ onLogin }: LoginProps) {
     onLogin.login(data.username, data.password).then((dataInner: LoginResponse) => {
       const { user, token } = dataInner;
       localStorage.setItem('token', token);
-      useAppStore.setState({ user });
+      useAppStore.getState().login(user);
       navigate('/');
     });
   };
@@ -52,6 +54,9 @@ export function Login({ onLogin }: LoginProps) {
               label: 'Username',
               placeholder: 'Enter your username',
               type: 'input',
+              inputType: 'text',
+              includeInCSV: true,
+              includeInJSON: true,
             }}
             register={register}
             error={errors.username}
@@ -63,6 +68,8 @@ export function Login({ onLogin }: LoginProps) {
               inputType: 'password',
               placeholder: 'Enter your password',
               type: 'input',
+              includeInCSV: true,
+              includeInJSON: true,
             }}
             register={register}
             error={errors.password}

package/src/components/Panel.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { ErrorBoundary } from './ErrorBoundary';
 import { ToastContainer } from 'react-toastify';
 
-type AppProps = {
+interface AppProps {
   children: React.ReactNode;
-};
+}
 
 export function Panel({ children }: AppProps) {
   /*useEffect(() => {

package/src/components/form/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { InputConfiguration } from '../../decorators/form/Input';
 import { useFormContext } from 'react-hook-form';
 import { Label } from './Label';

package/src/components/form/FormField.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { InputConfiguration, InputOptions } from '../../decorators/form/Input';
+import React from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
 import { useFormContext, UseFormRegister } from 'react-hook-form';
 import { Uploader } from './Uploader';
 import { Checkbox } from './Checkbox';
@@ -8,16 +8,17 @@ import { Select } from './Select';
 
 interface FormFieldProps {
   input: InputConfiguration;
+  //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>;
   error?: { message?: string };
   baseName?: string;
-  onSelectPreloader?: (
-    inputOptions: InputConfiguration
-  ) => Promise<{ label: string; value: string }[]>;
 }
 
 interface NestedFormFieldsProps {
   input: InputConfiguration;
+  //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>;
 }
 
@@ -25,8 +26,11 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
   const form = useFormContext();
   //TODO: inputOptions İnputResult seperate
   const data = form.getValues(input.name!);
+  console.log('--_>', data, input, input.nestedFields);
   return (
     <div>
+      {/* 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 */}
       {data?.map((value: any, index: number) => (
         <div key={index}>
           {input.nestedFields?.map((nestedInput: InputConfiguration) => (
@@ -37,7 +41,7 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
               register={register}
               error={
                 input.name
-                  ? { message: (form.formState.errors[input.name] as any)?.message }
+                  ? { message: (form.formState.errors[input.name] as { message: string })?.message }
                   : undefined
               }
             />
@@ -48,8 +52,8 @@ function NestedFormFields({ input, register }: NestedFormFieldsProps) {
   );
 }
 
-export function FormField({ input, register, error, baseName, onSelectPreloader }: FormFieldProps) {
-  const fieldName = (baseName ? baseName.toString() + '.' : '') + input.name || '';
+export function FormField({ input, register, error, baseName }: FormFieldProps) {
+  const fieldName: string = (baseName ? baseName.toString() + '.' : '') + input.name || '';
   const renderField = () => {
     switch (input.type) {
       case 'textarea':
@@ -70,7 +74,7 @@ export function FormField({ input, register, error, baseName, onSelectPreloader
       case 'nested':
         return <NestedFormFields input={input} register={register} />;
       default:
-        null;
+        return null;
     }
   };
 

package/src/components/form/FormHeader.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AnyClass } from '../../types/AnyClass';
+import { FormUtils } from './FormPage';
+
+interface FormHeaderProps<T extends AnyClass> {
+  title?: string;
+  header?: (utils: FormUtils<T>) => React.ReactNode;
+  utils: FormUtils<T>;
+}
+
+export function FormHeader<T extends AnyClass>({ utils, header, title }: FormHeaderProps<T>) {
+  return (
+    <div className="form-header">
+      {title && <h2 className="form-title">{title}</h2>}
+      <div className="form-actions">{header ? header(utils) : null}</div>
+    </div>
+  );
+}

package/src/components/form/FormPage.tsx

@@ -2,30 +2,171 @@ 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 } from 'react-hook-form';
+import { FormProvider, Resolver, useForm, UseFormReturn, Path, PathValue } from 'react-hook-form';
 import { getFormPageMeta } from '../../decorators/form/getFormPageMeta';
+import { FormHeader } from './FormHeader';
+import { InputConfiguration } from '../../decorators/form/Input';
+
+export interface FormUtils<T extends AnyClass> {
+  getValues: () => T;
+  setValues: (values: Partial<T>) => void;
+  toJSON: (values: Partial<T>) => string;
+  fromJSON: (json: string) => Partial<T>;
+  export: (data: string, extension: 'txt' | 'json' | 'csv') => void;
+  import: () => Promise<string>;
+}
 
 export interface FormPageProps<T extends AnyClass> {
   model: AnyClassConstructor<T>;
+  title?: string;
+  documentTitle?: string;
+  header?: (utils: FormUtils<T>) => React.ReactNode;
 }
 
-export function FormPage<T extends AnyClass>({ model }: FormPageProps<T>) {
+function useCreateFormUtils<T extends AnyClass>(
+  inputs: InputConfiguration[],
+  form: UseFormReturn<T>
+): FormUtils<T> {
+  return {
+    getValues: form.getValues,
+    setValues: (values: Partial<T>) => {
+      Object.entries(values).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        //form.reset(); //TODO: if there is default fix it??
+        if (input) {
+          if (input.nestedFields) {
+            if (Array.isArray(value)) {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const innerArray: Record<string, any>[] = [];
+              value.forEach(nestedValue => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const innerObject: Record<string, any> = {};
+                input.nestedFields!.forEach(nestedInput => {
+                  if (nestedInput.includeInJSON) {
+                    innerObject[nestedInput.name] = nestedValue[nestedInput.name];
+                  }
+                });
+                innerArray.push(innerObject);
+              });
+              form.setValue(key as Path<T>, innerArray as PathValue<T, Path<T>>);
+            } else {
+              console.warn('Non-array nested fields are not supported for json conversion', value);
+            }
+          } else {
+            form.setValue(key as Path<T>, value);
+          }
+        }
+      });
+    },
+    toJSON: (values: Partial<T>) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const jsonData: Record<string, any> = {};
+      Object.entries(values).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        //form.reset(); //TODO: if there is default fix it??
+        if (input && input.includeInJSON) {
+          if (input.nestedFields) {
+            jsonData[key] = [];
+            if (Array.isArray(value)) {
+              //TODO: fix this
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              value.forEach((innerValue: any) => {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const nestedObject: Record<string, any> = {};
+                jsonData[key].push(nestedObject);
+                Object.entries(innerValue).forEach(([nestedKey, nestedValue]) => {
+                  const nestedInput = input.nestedFields!.find(
+                    nestedInput => nestedInput.name === nestedKey
+                  );
+                  if (nestedInput && nestedInput.includeInJSON) {
+                    nestedObject[nestedKey] = nestedValue;
+                  }
+                });
+              });
+            } else {
+              console.warn('Non-array nested fields are not supported for json conversion', value);
+            }
+          } else {
+            jsonData[key] = value;
+          }
+        }
+      });
+      return JSON.stringify(jsonData, null, 2);
+    },
+    fromJSON: (json: string): Partial<T> => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const jsonObject: Record<string, any> = {};
+      const jsonData = JSON.parse(json);
+      Object.entries(jsonData).forEach(([key, value]) => {
+        const input = inputs.find(input => input.name === key);
+        if (input && input.includeInJSON) {
+          jsonObject[key] = value;
+        }
+      });
+      return jsonObject as Partial<T>;
+    },
+    export: (data: string, extension: 'txt' | 'json' | 'csv') => {
+      const blob = new Blob([data], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `form-data.${extension}`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    },
+    import: () => {
+      return new Promise<string>(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.txt,.json,.csv';
+        input.onchange = e => {
+          const file = (e.target as HTMLInputElement).files?.[0];
+          if (file) {
+            const reader = new FileReader();
+            reader.onload = event => {
+              resolve(event.target?.result as string);
+            };
+            reader.readAsText(file);
+          }
+        };
+        input.click();
+      });
+    },
+  };
+}
+
+export function FormPage<T extends AnyClass>({
+  model,
+  title,
+  documentTitle,
+  header,
+}: FormPageProps<T>) {
   const { class: formClass, inputs, resolver } = useMemo(() => getFormPageMeta(model), [model]);
+  const params = useParams();
   const form = useForm<T>({
     resolver: resolver as Resolver<T>,
   });
+  const utils = useCreateFormUtils(inputs, form);
+
+  useEffect(() => {
+    if (documentTitle) {
+      document.title = documentTitle;
+    }
+  }, [documentTitle]);
 
-  const params = useParams();
   useEffect(() => {
     if (formClass.getDetailsData) {
       formClass.getDetailsData(params as Record<string, string>).then(data => {
-        form.reset(data as any);
+        form.reset(data as T);
       });
     }
-  }, [params, form.reset, formClass.getDetailsData]);
+  }, [params, form.reset, formClass.getDetailsData, formClass, form]);
 
   return (
     <FormProvider {...form}>
+      <FormHeader title={title} utils={utils} header={header} />
       <InnerForm inputs={inputs} formClass={formClass} />
     </FormProvider>
   );

package/src/components/form/InnerForm.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { FormProvider, useForm, useFormContext, UseFormReturn } from 'react-hook-form';
+import React, { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { InputConfiguration } from '../../decorators/form/Input';
 import { FormField } from './FormField';
 import { useNavigate } from 'react-router';
@@ -45,15 +45,14 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
               form.reset(resut);
               setErrorMessage(null);
               toast.success('Form submitted successfully');
-              if (formClass.redirectBackOnSuccess) {
-                navigate(-1);
-              }
+              //TODO: https path or relative path
               if (formClass.redirectSuccessUrl) {
                 navigate(formClass.redirectSuccessUrl);
               }
-            } catch (error: any) {
+            } catch (error: unknown) {
+              const errorResponse = error as { response?: { data?: { message?: string } } };
               const message =
-                error?.response?.data?.message ||
+                errorResponse?.response?.data?.message ||
                 (error instanceof Error ? error.message : 'An error occurred');
               toast.error('Something went wrong');
               setErrorMessage(message);
@@ -81,7 +80,13 @@ export function InnerForm<T extends AnyClass>({ inputs, formClass }: InnerFormPr
               register={form.register}
               error={
                 input.name
-                  ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }
+                  ? {
+                      message: (
+                        form.formState.errors[input.name as keyof T] as {
+                          message: string;
+                        }
+                      )?.message,
+                    }
                   : undefined
               }
             />