proje-react-panel 1.0.17 → 1.1.1

package/src/components/components/ImageUploader.tsx

@@ -1,301 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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/Label.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-interface LabelProps {
-    htmlFor: string;
-    label?: string;
-    fieldName: string;
-}
-
-export function Label({ htmlFor, label, fieldName }: LabelProps) {
-    return (
-        <label htmlFor={htmlFor}>
-            {label ?? fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
-        </label>
-    );
-} 

package/src/components/components/index.ts

@@ -1,8 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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> {
-  data: T[];
-  listData: ListData<T>;
-  onRemoveItem?: (item: T) => Promise<void>;
-}
-
-export function Datagrid<T>({ data, listData, onRemoveItem }: DatagridProps<T>) {
-  const cells = listData.cells;
-  const listGeneralCells =
-    typeof listData.list?.cells === 'function'
-      ? listData.list?.cells?.(data[0])
-      : listData.list?.cells;
-
-  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>
-              ))}
-              {listGeneralCells?.details && <th>Details</th>}
-              {listGeneralCells?.edit && <th>Edit</th>}
-              {listGeneralCells?.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>;
-                })}
-                {listGeneralCells?.details && (
-                  <td>
-                    <Link to={listGeneralCells.details.path} className="util-cell-link">
-                      <SearchIcon className="icon icon-search" />
-                      <span className="util-cell-label">{listGeneralCells.details.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.edit && (
-                  <td>
-                    <Link to={listGeneralCells.edit.path} className="util-cell-link">
-                      <PencilIcon className="icon icon-pencil" />
-                      <span className="util-cell-label">{listGeneralCells.edit.label}</span>
-                    </Link>
-                  </td>
-                )}
-                {listGeneralCells?.delete && (
-                  <td>
-                    <a
-                      onClick={() => {
-                        onRemoveItem?.(item);
-                      }}
-                      className="util-cell-link"
-                    >
-                      <TrashIcon className="icon icon-trash" />
-                      <span className="util-cell-label">{listGeneralCells.delete.label}</span>
-                    </a>
-                  </td>
-                )}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-}

package/src/components/pages/ControllerDetails.tsx

@@ -1,37 +0,0 @@
-import { useParams } from 'react-router';
-import React, { useEffect, useState } from 'react';
-import { Screen } from '../../types/Screen';
-import { ErrorComponent } from '../components/ErrorComponent';
-
-export function ControllerDetails({ screen }: { screen: Screen }) {
-  const { id } = useParams();
-  const [data, setData] = useState<any>(null);
-  const [error, setError] = useState(null);
-
-  useEffect(() => {
-    if (screen.controller && id) {
-      /*
-      CrudApi.details({ ...fetchSettings, token }, screen.controller, id)
-        .then(res => {
-          setData(res);
-        })
-        .catch((e: any) => {
-          setError(e);
-          console.error(e);
-        });
-*/
-    }
-  }, [id, screen]);
-
-  if (error) {
-    return <ErrorComponent error={error} />;
-  }
-
-  return (
-    <p
-      dangerouslySetInnerHTML={{
-        __html: JSON.stringify(data, null, '   ' + '<br/>'),
-      }}
-    />
-  );
-}

package/src/components/pages/FormPage.tsx

@@ -1,34 +0,0 @@
-import React, { useMemo } from 'react';
-import { InnerForm } from '../components';
-import { AnyClass } from '../../types/AnyClass';
-import { getFormFields } from '../../decorators/form/getFormFields';
-
-export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
-export type OnSubmitFN<T> = (data: T) => Promise<T>;
-
-export interface FormPageProps<T extends AnyClass> {
-  model: T;
-  getDetailsData?: GetDetailsDataFN<T>;
-  redirect?: string;
-  onSubmit: OnSubmitFN<T>;
-  redirectBackOnSuccess?: boolean;
-}
-
-export function FormPage<T extends AnyClass>({
-  model,
-  getDetailsData,
-  onSubmit,
-  redirect,
-  redirectBackOnSuccess = true,
-  ...rest
-}: FormPageProps<T>) {
-  const formOptions = useMemo(() => getFormFields(model), [model]);
-  return (
-    <InnerForm
-      getDetailsData={getDetailsData}
-      onSubmit={onSubmit}
-      formOptions={formOptions}
-      redirectBackOnSuccess={redirectBackOnSuccess}
-    />
-  );
-}

package/src/decorators/Crud.ts

@@ -1,20 +0,0 @@
-import 'reflect-metadata';
-
-const CRUD_KEY = 'Crud'; // Changed from Symbol to string
-
-export interface CrudOptions {
-  controller: string;
-}
-
-export function Crud(options?: CrudOptions): ClassDecorator {
-  return (target: Function) => {
-    if (options) {
-      Reflect.defineMetadata(CRUD_KEY, options, target);
-    }
-  };
-}
-
-
-export function getClassCrudData(entityClass: any): CrudOptions | undefined {
-  return Reflect.getMetadata(CRUD_KEY, entityClass);
-}

package/src/decorators/form/FormOptions.ts

@@ -1,8 +0,0 @@
-import { FormConfiguration } from "./Form";
-import { InputOptions } from "./Input";
-
-export interface FormOptions {
-	resolver: any; //TODO: type
-	form?: FormConfiguration;
-	inputs?: InputOptions[];
-}

package/src/decorators/form/getFormFields.ts

@@ -1,13 +0,0 @@
-import { AnyClass } from "../../types/AnyClass";
-import { FormOptions } from "./FormOptions";
-import { getInputFields } from "./Input";
-import { getFormConfiguration } from "./Form";
-import { classValidatorResolver } from "@hookform/resolvers/class-validator";
-
-export function getFormFields<T extends AnyClass>(entityClass: T): FormOptions {
-	return {
-		resolver: classValidatorResolver(entityClass as any),
-		form: getFormConfiguration(entityClass),
-		inputs: getInputFields<T>(entityClass),
-	};
-}

package/src/decorators/list/GetCellFields.ts

@@ -1,13 +0,0 @@
-import { CELL_KEY, CellOptions } from "./Cell";
-
-export function getCellFields(entityClass: any): CellOptions[] {
-	const prototype = entityClass.prototype;
-	const cellFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
-	return cellFields.map((field) => {
-		const fields = Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {};
-		return {
-			...fields,
-			name: fields?.name ?? field,
-		};
-	});
-}

package/src/decorators/list/ImageCell.ts

@@ -1,13 +0,0 @@
-import "reflect-metadata";
-import { Cell, CellOptions } from "./Cell";
-
-export interface ImageCellOptions extends CellOptions {
-	baseUrl: string;
-}
-
-export function ImageCell(options?: ImageCellOptions): PropertyDecorator {
-	return Cell({
-		...options,
-		type: "image",
-	});
-}

package/src/decorators/list/ListData.ts

@@ -1,7 +0,0 @@
-import { ListOptions } from './List';
-import { CellOptions } from './Cell';
-
-export interface ListData<T> {
-  list?: ListOptions<T>;
-  cells: CellOptions[];
-}

package/src/decorators/list/getListFields.ts

@@ -1,10 +0,0 @@
-import { getClassListData } from './List';
-import { getCellFields } from './GetCellFields';
-import { ListData } from './ListData';
-
-export function getListFields<T>(entityClass: T): ListData<T> {
-  return {
-    list: getClassListData(entityClass),
-    cells: getCellFields(entityClass),
-  };
-}