proje-react-panel 1.0.14 → 1.0.16

package/src/components/components/Counter.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+interface CounterProps {
+    image: React.ReactNode;
+    text: string;
+    targetNumber: number;
+    duration?: number;
+}
+
+export function Counter({ image, text, targetNumber, duration = 2000 }: CounterProps) {
+    const [count, setCount] = useState<number>(0);
+
+    useEffect(() => {
+        let startTime: number;
+        let animationFrameId: number;
+
+        const animate = (timestamp: number) => {
+            if (!startTime) startTime = timestamp;
+            const progress = timestamp - startTime;
+            const percentage = Math.min(progress / duration, 1);
+            
+            setCount(Math.floor(percentage * targetNumber));
+
+            if (percentage < 1) {
+                animationFrameId = requestAnimationFrame(animate);
+            }
+        };
+
+        animationFrameId = requestAnimationFrame(animate);
+
+        return () => {
+            if (animationFrameId) {
+                cancelAnimationFrame(animationFrameId);
+            }
+        };
+    }, [targetNumber, duration]);
+
+    return (
+        <div className="counter-container">
+            <div className="counter-image">
+                {image}
+            </div>
+            <div className="counter-text">
+                {text}
+            </div>
+            <div className="counter-value">
+                {count}
+            </div>
+        </div>
+    );
+}

package/src/components/components/FormField.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { InputOptions } from '../../decorators/form/Input';
+import { Label } from './Label';
+import { useFormContext, UseFormRegister } from 'react-hook-form';
+import { ImageUploader } from './ImageUploader';
+import { Checkbox } from './Checkbox';
+
+interface FormFieldProps {
+  input: InputOptions;
+  register: UseFormRegister<any>;
+  error?: { message?: string };
+  baseName?: string;
+}
+
+interface NestedFormFieldsProps {
+  input: InputOptions;
+  register: UseFormRegister<any>;
+}
+
+function NestedFormFields({ input, register }: NestedFormFieldsProps) {
+  const form = useFormContext();
+  //TODO: inputOptions İnputResult seperate
+  const data = form.getValues(input.name!);
+  return (
+    <div>
+      {data?.map((value: any, index: number) => (
+        <div key={index}>
+          {input.nestedFields?.map((nestedInput: InputOptions) => (
+            <FormField
+              key={nestedInput.name?.toString() ?? ''}
+              baseName={input.name + '[' + index + ']'}
+              input={nestedInput}
+              register={register}
+              error={
+                input.name
+                  ? { message: (form.formState.errors[input.name] as any)?.message }
+                  : undefined
+              }
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function FormField({ input, register, error, baseName }: FormFieldProps) {
+  const fieldName = (baseName ? baseName.toString() + '.' : '') + input.name || '';
+  const renderField = () => {
+    switch (input.type) {
+      case 'textarea':
+        return <textarea {...register(fieldName)} placeholder={input.placeholder} id={fieldName} />;
+      case 'select':
+        return (
+          <select {...register(fieldName)} id={fieldName}>
+            <option value="">Select {fieldName}</option>
+            {input.options?.map(option => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        );
+      case 'input': { 
+        return (
+          <input
+            type={input.inputType}
+            {...register(fieldName)}
+            placeholder={input.placeholder}
+            id={fieldName}
+          />
+        );
+      }
+      case 'file-upload':
+        return <ImageUploader />;
+      case 'checkbox':
+        return <Checkbox {...register(fieldName)} id={fieldName} />;
+      case 'hidden':
+        return <input type="hidden" {...register(fieldName)} id={fieldName} />;
+      case 'nested':
+        return <NestedFormFields input={input} register={register} />;
+      default:
+        null;
+    }
+  };
+
+  return (
+    <div className="form-field">
+      <Label htmlFor={fieldName} label={input.label} fieldName={fieldName} />
+      {renderField()}
+      {error && <span className="error-message">{error.message}</span>}
+    </div>
+  );
+}

package/src/components/components/ImageUploader.tsx

@@ -0,0 +1,301 @@
+import React, { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import { bytesToSize } from "../../utils/format";
+
+interface ThumbnailImageProps {
+	name: string;
+	src: string;
+	size: number;
+	style?: React.CSSProperties;
+}
+
+interface MultipleImageUploaderProps {
+	value?: Array<{ file: File; image: string; remove?: boolean }>;
+	onError?: (error: string | null) => void;
+	onClear?: () => void;
+	reset?: any;
+	onFilesChange?: (files: File[]) => void;
+}
+
+interface FileWithPreview {
+	file: File;
+	image: string;
+}
+
+const uploadState = Object.freeze({
+	BEFORE: "before",
+	HOVER: "hover",
+	AFTER: "after",
+} as const);
+
+type UploadStateType = (typeof uploadState)[keyof typeof uploadState];
+
+function ThumbnailImage(props: ThumbnailImageProps) {
+	return (
+		<div>
+			<img {...props} style={{ width: 100 }} />
+			<p>
+				{props.name} <span style={{ whiteSpace: "none" }}>({bytesToSize(props.size)})</span>
+			</p>
+		</div>
+	);
+}
+
+export function ImageUploader() {
+	const {
+		register,
+		formState: { errors },
+		watch,
+		setValue,
+		clearErrors,
+		setError,
+	} = useFormContext();
+	const up = watch("uploader");
+
+	useEffect(() => {
+		register("uploader", { required: true });
+	}, [register]);
+
+	return (
+		<div>
+			<span className="form-error" style={{ bottom: 2, top: "unset" }}>
+				{errors.uploader?.type === "required" && "At least 1 image is required!"}
+				{errors.uploader?.type === "custom" && errors.uploader.message?.toString()}
+			</span>
+			<MultipleImageUploader
+				reset={up}
+				onError={(data: string | null) => {
+					if (!data) {
+						setValue("uploader", { files: [] });
+						clearErrors("uploader");
+					} else {
+						setError("uploader", {
+							type: "custom",
+							message: data,
+						});
+					}
+				}}
+				onClear={() => {
+					setValue("uploader", { files: [] });
+					clearErrors("uploader");
+				}}
+				onFilesChange={(files) => {
+					setValue("uploader", { files });
+				}}
+			/>
+		</div>
+	);
+}
+
+export function MultipleImageUploader(props: MultipleImageUploaderProps) {
+	const [currentUploadState, setUploadState] = React.useState<UploadStateType>(uploadState.BEFORE);
+	const [images, setImages] = React.useState<Array<{ file: File; image: string; remove?: boolean }>>(
+		props.value || []
+	);
+	const [files, setFiles] = React.useState<FileWithPreview[]>([]);
+	const [counter, setCounter] = React.useState(0);
+	console.log("files", files);
+	const dropzoneElement = React.useRef<HTMLDivElement>(null);
+	const imageInputRef = React.useRef<HTMLInputElement>(null);
+
+	React.useEffect(() => {
+		const element = dropzoneElement.current;
+		if (!element) return;
+
+		const handleDragEnter = (e: DragEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			dragEnter();
+		};
+
+		const handleDragLeave = (e: DragEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			dragLeave();
+		};
+
+		const handleDragOver = (e: DragEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+		};
+
+		const handleDrop = (e: DragEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+			setCounter(0);
+			const droppedFiles = e.dataTransfer?.files;
+			if (!droppedFiles) return;
+
+			setFiles([]);
+			setUploadState(uploadState.AFTER);
+
+			const newFiles: File[] = [];
+			for (let i = 0; i < droppedFiles.length; i++) {
+				const reader = new FileReader();
+				reader.onload = (event) => {
+					if (!event.target) return;
+					const check = onFileChange([
+						...files,
+						{ file: droppedFiles[i], image: event.target.result as string },
+					]);
+					if (check) {
+						newFiles.push(droppedFiles[i]);
+						if (imageInputRef.current) {
+							imageInputRef.current.files = droppedFiles;
+						}
+						setFiles([]);
+					}
+					// Notify parent of file changes
+					if (props.onFilesChange) {
+						props.onFilesChange(newFiles);
+					}
+				};
+				reader.readAsDataURL(droppedFiles[i]);
+			}
+			if (imageInputRef.current) {
+				imageInputRef.current.files = droppedFiles;
+			}
+		};
+
+		element.addEventListener("dragenter", handleDragEnter, false);
+		element.addEventListener("dragleave", handleDragLeave, false);
+		element.addEventListener("dragover", handleDragOver, false);
+		element.addEventListener("drop", handleDrop, false);
+
+		return () => {
+			element.removeEventListener("dragenter", handleDragEnter);
+			element.removeEventListener("dragleave", handleDragLeave);
+			element.removeEventListener("dragover", handleDragOver);
+			element.removeEventListener("drop", handleDrop);
+		};
+	}, [files]);
+
+	const dragEnter = () => {
+		setCounter((prev) => prev + 1);
+		setUploadState(uploadState.HOVER);
+	};
+
+	const dragLeave = () => {
+		setCounter((prev) => {
+			if (prev - 1 === 0) {
+				setUploadState(uploadState.BEFORE);
+				return 0;
+			}
+			return prev - 1;
+		});
+	};
+
+	const clickRemoveImage = (i: number) => {
+		const sources = [...images];
+		sources[i].remove = !sources[i].remove;
+		setImages(sources);
+	};
+
+	const clickRemoveFile = () => {
+		setFiles([]);
+		if (imageInputRef.current) {
+			imageInputRef.current.value = "";
+		}
+		props.onClear?.();
+	};
+
+	const checkValid = (filesInner: FileWithPreview[]): string | null => {
+		if (!filesInner) return null;
+		if (filesInner.length >= 10) return "you can't send more than 10 images";
+		for (let i = 0; i < filesInner.length; i++) {
+			const file = filesInner[i].file;
+			const split = file.name.split(".");
+			if (!["png", "jpg", "jpeg"].includes(split[split.length - 1])) {
+				return `Extension of the file can only be "png", "jpg" or "jpeg" `;
+			}
+			if (file) {
+				if (file.size > 1048576) {
+					return `Size of "${file.name}" can't be bigger than 1mb`;
+				}
+			}
+		}
+		return null;
+	};
+
+	const onFileChange = (filesInner: FileWithPreview[]): string | null => {
+		const check = checkValid(filesInner);
+		if (!check) {
+			setFiles(filesInner);
+		}
+		props.onError?.(check);
+		return check;
+	};
+
+	const renderImages = () => {
+		const imageElements = [];
+		if (files) {
+			console.log("---->", files);
+			for (let i = 0; i < files.length; i++) {
+				let imageClassName = "image";
+				imageElements.push(
+					<div key={i} className="image-container">
+						<div className={imageClassName}>
+							<ThumbnailImage name={files[i].file.name} src={files[i].image} size={files[i].file.size} />
+						</div>
+					</div>
+				);
+			}
+		}
+		return imageElements;
+	};
+
+	return (
+		<div ref={dropzoneElement} className={"multi-image form-element dropzone " + currentUploadState}>
+			<input ref={imageInputRef} type="file" style={{ display: "none" }} className="target" name={"file"} />
+			<div className="container">
+				<button className="trash" onClick={clickRemoveFile} type="button">
+					Delete All
+				</button>
+				{renderImages()}
+				<div>
+					<button
+						type={"button"}
+						onClick={() => {
+							const fileInput = document.getElementById("file__") as HTMLInputElement;
+							if (fileInput) {
+								fileInput.click();
+							}
+						}}
+						className="plus">
+						<span>
+							+ Add Image
+							<p>Drag image here or Select Image</p>
+						</span>
+					</button>
+				</div>
+				<input
+					hidden
+					id={"file__"}
+					multiple
+					type={"file"}
+					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+						const selectedFiles = event.target.files;
+						if (!selectedFiles) return;
+
+						setFiles([]);
+						setUploadState(uploadState.AFTER);
+						for (let i = 0; i < selectedFiles.length; i++) {
+							const reader = new FileReader();
+							reader.onload = (eventInner) => {
+								if (!eventInner.target) return;
+								onFileChange([
+									...files,
+									{ file: selectedFiles[i], image: eventInner.target.result as string },
+								]);
+							};
+							reader.readAsDataURL(selectedFiles[i]);
+						}
+						if (imageInputRef.current) {
+							imageInputRef.current.files = selectedFiles;
+						}
+					}}
+				/>
+			</div>
+		</div>
+	);
+}

package/src/components/components/InnerForm.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { InputOptions } from '../../decorators/form/Input';
+import { FormField } from './FormField';
+import { FormOptions } from '../../decorators/form/FormOptions';
+import { AnyClass } from '../../types/AnyClass';
+import { OnSubmitFN, GetDetailsDataFN } from '../pages/FormPage';
+import { useParams, useNavigate } from 'react-router';
+
+interface InnerFormProps<T extends AnyClass> {
+  formOptions: FormOptions;
+  onSubmit: OnSubmitFN<T>;
+  getDetailsData?: GetDetailsDataFN<T>;
+  redirectBackOnSuccess?: boolean;
+}
+
+export function InnerForm<T extends AnyClass>({
+  formOptions,
+  onSubmit,
+  getDetailsData,
+  redirectBackOnSuccess,
+}: InnerFormProps<T>) {
+  const params = useParams();
+  const form = useForm<T>({
+    resolver: formOptions.resolver,
+  });
+  const navigate = useNavigate();
+  const inputs = formOptions.inputs;
+  useEffect(() => {
+    if (getDetailsData) {
+      getDetailsData(params as Record<string, string>).then(data => {
+        form.reset({ ...data });
+      });
+    }
+  }, [params, form.reset]);
+
+  return (
+    <div className="form-wrapper">
+      <FormProvider {...form}>
+        <form
+          onSubmit={form.handleSubmit(
+            async dataForm => {
+              await onSubmit(dataForm);
+              if (redirectBackOnSuccess) {
+                navigate(-1);
+              }
+            },
+            (errors, event) => {
+              console.log('error creating creation', errors, event);
+            }
+          )}
+        >
+          <div>
+            {inputs?.map((input: InputOptions) => (
+              <FormField
+                key={input.name || ''}
+                input={input}
+                register={form.register}
+                error={
+                  input.name
+                    ? { message: (form.formState.errors[input.name as keyof T] as any)?.message }
+                    : undefined
+                }
+              />
+            ))}
+            <button type="submit" className="submit-button">
+              Submit
+            </button>
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+}

package/src/components/components/LoadingScreen.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function LoadingScreen() {
+  return (
+    <div className="loading-screen">
+      <div className="loading-container">
+        <div className="loading-spinner"></div>
+        <div className="loading-text">Loading...</div>
+      </div>
+    </div>
+  );
+}

package/src/components/components/index.ts

@@ -0,0 +1,8 @@
+export { InnerForm } from './InnerForm';
+export { FormField } from './FormField';
+export { LoadingScreen } from './LoadingScreen';
+export { Counter } from './Counter';
+export { ImageUploader } from './ImageUploader';
+export { ErrorComponent } from './ErrorComponent';
+export { Label } from './Label';
+export { ErrorBoundary } from './ErrorBoundary'; 

package/src/components/components/list/Datagrid.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { CellOptions } from '../../../decorators/list/Cell';
+import { Link } from 'react-router';
+import { useAppStore } from '../../../store/store';
+import { ImageCellOptions } from '../../../decorators/list/ImageCell';
+import { ListData } from '../../../decorators/list/ListData';
+import { EmptyList } from './EmptyList';
+import SearchIcon from '../../../assets/icons/svg/search.svg';
+import PencilIcon from '../../../assets/icons/svg/pencil.svg';
+import TrashIcon from '../../../assets/icons/svg/trash.svg';
+
+interface DatagridProps<T extends { id: string }> {
+  data: T[];
+  listData: ListData;
+  onRemoveItem?: (item: T) => Promise<void>;
+}
+
+export function Datagrid<T extends { id: string }>({ data, listData, onRemoveItem }: DatagridProps<T>) {
+  const cells = listData.cells;
+  const utilCells = listData.list?.utilCells;
+
+  return (
+    <div className="datagrid">
+      {!data || data.length === 0 ? (
+        <EmptyList />
+      ) : (
+        <table className="datagrid-table">
+          <thead>
+            <tr>
+              {cells.map(cellOptions => (
+                <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+              ))}
+              {utilCells?.details && <th>Details</th>}
+              {utilCells?.edit && <th>Edit</th>}
+              {utilCells?.delete && <th>Delete</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((item, index) => (
+              <tr key={index}>
+                {cells.map(cellOptions => {
+                  // @ts-ignore
+                  const value = item[cellOptions.name];
+                  let render = value ?? '-'; // Default value if the field is undefined or null
+
+                  switch (cellOptions.type) {
+                    case 'date':
+                      if (value) {
+                        const date = new Date(value);
+                        render = `${date.getDate().toString().padStart(2, '0')}/${(
+                          date.getMonth() + 1
+                        )
+                          .toString()
+                          .padStart(
+                            2,
+                            '0'
+                          )}/${date.getFullYear()} ${date.getHours().toString().padStart(2, '0')}:${date
+                          .getMinutes()
+                          .toString()
+                          .padStart(2, '0')}`;
+                      }
+                      break;
+
+                    case 'image': {
+                      const imageCellOptions = cellOptions as ImageCellOptions;
+                      render = (
+                        <img
+                          width={100}
+                          height={100}
+                          src={imageCellOptions.baseUrl + value}
+                          style={{ objectFit: 'contain' }}
+                        />
+                      );
+                      break;
+                    }
+                    case 'string':
+                    default:
+                      render = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
+                      break;
+                  }
+                  /*
+								if (cellOptions.linkTo) {
+									render = <Link to={cellOptions.linkTo(item)}>{formattedValue}</Link>;
+								}
+*/
+                  return <td key={cellOptions.name}>{render}</td>;
+                })}
+                {utilCells?.details && (
+                  <td>
+                    <Link to={`${utilCells.details.path}/${item.id}`} className="util-cell-link">
+                      <SearchIcon className="icon icon-search" />
+                      <span className="util-cell-label">{utilCells.details.label}</span>
+                    </Link>
+                  </td>
+                )}
+                {utilCells?.edit && (
+                  <td>
+                    <Link to={`${utilCells.edit.path}/${item.id}`} className="util-cell-link">
+                      <PencilIcon className="icon icon-pencil" />
+                      <span className="util-cell-label">{utilCells.edit.label}</span>
+                    </Link>
+                  </td>
+                )}
+                {utilCells?.delete && (
+                  <td>
+                    <a onClick={() => {
+                      onRemoveItem?.(item)
+                    }} className="util-cell-link">
+                      <TrashIcon className="icon icon-trash" />
+                      <span className="util-cell-label">{utilCells.delete.label}</span>
+                    </a>
+                  </td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/components/components/list/EmptyList.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export const EmptyList: React.FC = () => {
+  return (
+    <div className="empty-list">
+      <div className="empty-list-content">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="64"
+          height="64"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
+          <polyline points="13 2 13 9 20 9" />
+        </svg>
+        <h3>No Data Found</h3>
+        <p>There are no items to display at the moment.</p>
+      </div>
+    </div>
+  );
+};