proje-react-panel 1.0.17 → 1.1.0

package/src/styles/components/checkbox.scss

@@ -0,0 +1,42 @@
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  * {
+    cursor: pointer;
+  }
+}
+
+input.apple-switch {
+  position: relative;
+  -webkit-appearance: none;
+  outline: none;
+  width: 50px;
+  height: 30px;
+  background-color: #fff;
+  border: 1px solid #d9dadc;
+  border-radius: 50px;
+  box-shadow: inset -20px 0 0 0 #fff;
+}
+
+input.apple-switch:after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  background: transparent;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+input.apple-switch:checked {
+  box-shadow: inset 20px 0 0 0 #4ed164;
+  border-color: #4ed164;
+}
+
+input.apple-switch:checked:after {
+  left: 20px;
+  box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
+}

package/src/styles/components/uploader.scss

@@ -0,0 +1,86 @@
+.uploader {
+  &-container {
+    padding: 1.5rem;
+    border: 2px dashed var(--border-color, #e0e0e0);
+    border-radius: 8px;
+    background-color: var(--bg-color, #fafafa);
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: var(--primary-color, #2196f3);
+      background-color: var(--bg-hover-color, #f5f5f5);
+    }
+  }
+
+  &-button {
+    background-color: var(--primary-color, #2196f3);
+    color: var(--button-text-color, white);
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 4px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: var(--primary-hover-color, #1976d2);
+    }
+
+    &:active {
+      background-color: var(--primary-active-color, #1565c0);
+    }
+  }
+
+  &-files {
+    margin-top: 1.5rem;
+    display: grid;
+    gap: 1rem;
+  }
+
+  &-file {
+    background-color: var(--file-bg-color, white);
+    padding: 1rem;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
+    display: grid;
+    gap: 0.5rem;
+
+    p {
+      margin: 0;
+      color: var(--text-color, #424242);
+      font-size: 0.875rem;
+
+      &:first-child {
+        color: var(--primary-color, #1976d2);
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+:root {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}
+
+// Dark theme
+[data-theme='dark'] {
+  --border-color: #424242;
+  --bg-color: #1e1e1e;
+  --bg-hover-color: #2d2d2d;
+  --primary-color: #64b5f6;
+  --primary-hover-color: #42a5f5;
+  --primary-active-color: #2196f3;
+  --button-text-color: #ffffff;
+  --file-bg-color: #2d2d2d;
+  --shadow-color: rgba(0, 0, 0, 0.2);
+  --text-color: #e0e0e0;
+}

package/src/styles/details.scss

@@ -0,0 +1,62 @@
+:root {
+  --background-color: #1a1a1a;
+  --text-color: #e0e0e0;
+  --label-color: #a0a0a0;
+  --empty-value-color: #666;
+  --error-color: #ff6b6b;
+  --shadow-color: rgba(0, 0, 0, 0.3);
+}
+
+.details-page {
+  padding: 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  .details-item {
+    background: var(--background-color);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 2px 4px var(--shadow-color);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    .item-label {
+      font-size: 0.875rem;
+      color: var(--label-color);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 0.5rem;
+    }
+
+    .item-value {
+      font-size: 1rem;
+      color: var(--text-color);
+      line-height: 1.5;
+      word-break: break-word;
+
+      &:empty {
+        &::after {
+          content: '—';
+          color: var(--empty-value-color);
+        }
+      }
+    }
+  }
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+}
+
+.error-container {
+  padding: 2rem;
+  text-align: center;
+  color: var(--error-color);
+}

package/src/styles/form.scss

@@ -1,10 +1,8 @@
 .form-wrapper {
-  max-width: 400px;
   padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   background-color: #1a1a1a;
   color: #f2f2f2;
+  width: 100%;
 
   form {
     display: flex;
@@ -14,13 +12,6 @@
   .form-field {
     margin-bottom: 16px;
 
-    label {
-      font-weight: bold;
-      margin-bottom: 6px;
-      display: block;
-      color: #f2f2f2;
-    }
-
     input[type='text'],
     input[type='password'],
     input[type='email'],
@@ -59,7 +50,7 @@
 
     select {
       appearance: none;
-      background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
       background-repeat: no-repeat;
       background-position: right 0.7rem top 50%;
       background-size: 0.65rem auto;
@@ -88,3 +79,10 @@
     }
   }
 }
+
+.label {
+  font-weight: bold;
+  margin-bottom: 6px;
+  display: block;
+  color: #f2f2f2;
+}

package/src/styles/index.scss

@@ -1,16 +1,18 @@
-@use './layout';
-// Imported styles will be scoped under .layout
-@use './sidebar';
-@use './form';
-@use './list';
-@use './login';
-@use './error-boundary';
-@use './image-uploader';
-@use './counter';
-@use './loading-screen';
-@use './pagination';
-@use './filter-popup';
+@import './layout';
+@import './sidebar';
+@import './form';
+@import './list';
+@import './login';
+@import './error-boundary';
+@import './counter';
+@import './loading-screen';
+@import './pagination';
+@import './filter-popup';
+@import './components/uploader.scss';
+@import './components/checkbox';
+@import './details';
 
+//TODO: import deprecated
 .layout {
   display: flex;
   max-height: 100vh;
@@ -39,4 +41,16 @@
   height: 14px;
   stroke: currentColor;
   fill: currentColor;
+  &.icon-true {
+    width: 20px;
+    height: 20px;
+    stroke: #4caf50;
+    fill: none;
+  }
+  &.icon-false {
+    width: 20px;
+    height: 20px;
+    stroke: #ff0000;
+    fill: none;
+  }
 }

package/src/styles/list.scss

@@ -143,7 +143,9 @@ $datagrid-height: calc(100vh - ($header-height + $footer-height));
   color: #666;
   text-decoration: none;
   transition: color 0.2s ease;
-
+  &.util-cell-link-remove {
+    cursor: pointer;
+  }
   &:hover {
     color: #333;
   }

package/src/types/AnyClass.ts

@@ -1 +1,2 @@
-export type AnyClass = abstract new (...args: any[]) => any;
+export type AnyClass = Record<string, any>;
+export type AnyClassConstructor<T extends AnyClass> = new (...args: any[]) => T;

package/src/types/initPanelOptions.ts

@@ -1,3 +1 @@
-export interface InitPanelOptions {
-  screenPaths: Record<string, string>;
-}
+export interface InitPanelOptions {}

package/src/components/components/Checkbox.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  id: string;
-}
-
-export function Checkbox({ id, ...props }: CheckboxProps) {
-  return <input type="checkbox" id={id} className="checkbox" {...props} />;
-}

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>
-  );
-}