proje-react-panel 1.0.14 → 1.0.15

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,75 @@
+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 { DefaultValues } from 'react-hook-form';
+import { useParams } from 'react-router';
+
+interface InnerFormProps<T extends AnyClass> {
+  formOptions: FormOptions;
+  onSubmit: OnSubmitFN<T>;
+  redirect?: string;
+  getDetailsData?: GetDetailsDataFN<T>;
+}
+
+export function InnerForm<T extends AnyClass>({
+  formOptions,
+  onSubmit,
+  redirect,
+  getDetailsData,
+}: InnerFormProps<T>) {
+  const params = useParams();
+  const form = useForm<T>({
+    resolver: formOptions.resolver,
+  });
+
+  const inputs = formOptions.inputs;
+  useEffect(() => {
+    if (getDetailsData) {
+      getDetailsData(params.id as string).then(data => {
+        form.reset({ ...data });
+      });
+    }
+  }, [, form.reset]);
+
+  return (
+    <div className="form-wrapper">
+      <FormProvider {...form}>
+        <form
+          onSubmit={form.handleSubmit(
+            async dataForm => {
+              await onSubmit(dataForm);
+              if (redirect) {
+                window.location.href = redirect;
+              }
+            },
+            (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/layout/Layout.tsx

@@ -8,15 +8,18 @@ export function Layout<IconType>({
 	children,
 	menu,
 	getIcons,
+	logout,
 }: {
 	children?: React.ReactNode;
 	menu?: (screens: Record<string, ScreenCreatorData>) => { name: string; path: string; iconType: IconType }[];
 	getIcons?: (iconType: IconType) => React.ReactNode;
+	logout?: () => void;
 }) {
 	const { user, screenPaths } = useAppStore((s) => ({
 		user: s.user,
 		screenPaths: s.screenPaths,
 	}));
+	const data = useAppStore();
 	const navigate = useNavigate();
 	if (!user) {
 		navigate(screenPaths.login);
@@ -24,7 +27,11 @@ export function Layout<IconType>({
 
 	return (
 		<div className="layout">
-			<SideBar menu={menu} getIcons={getIcons} />
+			<SideBar onLogout={() => {
+				if (logout) {
+					logout();
+				}
+			}} menu={menu} getIcons={getIcons} />
 			<main className="content">{children}</main>
 		</div>
 	);

package/src/components/layout/SideBar.tsx

@@ -1,42 +1,114 @@
-import React, { useState } from "react";
-import { Link } from "react-router";
-import { ScreenCreatorData } from "../../types/ScreenCreatorData";
-import { useAppStore } from "../../store/store";
+import React, { useState } from 'react';
+import { Link, useLocation, useNavigate } from 'react-router';
+import { ScreenCreatorData } from '../../types/ScreenCreatorData';
+import { useAppStore } from '../../store/store';
 
 type GetMenuFunction<IconType> = (
-	screens: Record<string, ScreenCreatorData>
+  screens: Record<string, ScreenCreatorData>
 ) => { name: string; path: string; iconType: IconType }[];
 
 type GetIconsFunction<IconType> = (iconType: IconType) => React.ReactNode;
 
 export function SideBar<IconType>({
-	menu,
-	getIcons,
+  menu,
+  getIcons,
+  onLogout,
 }: {
-	menu?: GetMenuFunction<IconType>;
-	getIcons?: GetIconsFunction<IconType>;
+  menu?: GetMenuFunction<IconType>;
+  getIcons?: GetIconsFunction<IconType>;
+  onLogout?: () => void;
 }) {
-	const screens = useAppStore((s) => s.screens ?? {});
-	const [isOpen, setIsOpen] = useState(true);
+  const { screens, screenPaths } = useAppStore(s => ({
+    screens: s.screens ?? {},
+    screenPaths: s.screenPaths ?? {},
+  }));
+  const [isOpen, setIsOpen] = useState(true);
+  const location = useLocation();
+  const navigate = useNavigate();
 
-	return (
-		<div className={`sidebar ${isOpen ? "open" : "closed"}`}>
-			<button className="toggle-button" onClick={() => setIsOpen(!isOpen)}>
-				{isOpen ? "<" : ">"}
-			</button>
-			<nav className="nav-links">
-				{menu?.(screens).map((item, index) => (
-					<Link key={index} to={item.path} className="nav-link">
-						<span className={"nav-links-icon"}>{getIcons?.(item.iconType)}</span>
-						{isOpen ? <span>{item.name}</span> : null}
-					</Link>
-				))}
-				{/*{screens.map(([key, screen], index) => (
-					<Link key={`screen-${index}`} to={`/${key}`} className="nav-link">
-						{isOpen ? <span>{key}</span> : null}
-					</Link>
-				))}*/}
-			</nav>
-		</div>
-	);
+  // Helper function to determine if a link is active
+  const isActiveLink = (path: string) => {
+    // For root path, we need exact match
+    if (path === '/') {
+      return location.pathname === path;
+    }
+
+    // Normalize paths by removing leading/trailing slashes for comparison
+    const normalizedPath = path.replace(/^\/+|\/+$/g, '');
+    const normalizedLocation = location.pathname.replace(/^\/+|\/+$/g, '');
+
+    // Check if the current path matches the link path
+    return (
+      normalizedLocation === normalizedPath || normalizedLocation.startsWith(`${normalizedPath}/`)
+    );
+  };
+
+  return (
+    <div className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
+      <button
+        className="toggle-button"
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
+        aria-expanded={isOpen}
+      >
+        {isOpen ? '<' : '>'}
+      </button>
+      <nav className="nav-links">
+        {menu?.(screens).map((item, index) => (
+          <Link
+            key={index}
+            to={item.path}
+            className={`nav-link ${isActiveLink(item.path) ? 'active' : ''}`}
+            aria-current={isActiveLink(item.path) ? 'page' : undefined}
+          >
+            <span className={'nav-links-icon'}>{getIcons?.(item.iconType)}</span>
+            {isOpen ? <span>{item.name}</span> : null}
+          </Link>
+        ))}
+      </nav>
+      {onLogout && (
+        <div className="sidebar-footer">
+          <button
+            className="logout-button"
+            onClick={() => {
+              if (onLogout) {
+                onLogout();
+                navigate(screenPaths.login);
+              }
+            }}
+            aria-label="Logout"
+          >
+            <span className="nav-links-icon">
+              {
+                /*TODO: remove*/
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 12H2V4H6"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M10 8L14 4M14 4L10 0M14 4H6"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              }
+            </span>
+            {isOpen ? <span>Logout</span> : null}
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }

package/src/components/layout/index.ts

@@ -0,0 +1,2 @@
+export { SideBar } from './SideBar';
+export { Layout } from './Layout'; 

package/src/components/list/Datagrid.tsx

@@ -0,0 +1,101 @@
+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';
+
+interface ListProps<T> {
+  data: T[];
+  cells: CellOptions[];
+}
+
+export function Datagrid<T>({ data, cells }: ListProps<T>) {
+  if (!data || data.length === 0) {
+    return <div>No items available</div>;
+  }
+
+  return (
+    <div className="datagrid">
+      <table className="datagrid-table">
+        <thead>
+          <tr>
+            {cells.map(cellOptions => (
+              <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+            ))}
+            <th />
+            <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>;
+              })}
+              <td>
+                {/*@ts-ignore*/}
+                <Link to={'edit/' + (item?.id ?? '-')}>Edit</Link>
+                {/*@ts-ignore*/}
+                <Link to={'details/' + (item?.id ?? '-')}>Details</Link>
+              </td>
+              <td>
+                <button
+                  onClick={() => {
+                    /*@ts-ignore*/
+                    //CrudApi.delete({ ...fetchSettings, token }, screen.controller, item?.id);
+                  }}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}