proje-react-panel 1.0.8 → 1.0.10

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "proje-react-panel",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "",
   "author": "SEFA DEMİR",
   "license": "ISC",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
-  "source": [
-    "src/index.ts",
-    "src/dom/index.ts"
-  ],
+  "source": "src/index.ts",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -31,22 +28,31 @@
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.4",
+    "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-router": "^7.3.0",
-    "react-router-dom": "^7.3.0",
     "reflect-metadata": "^0.2.2",
     "rollup": "^4.35.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "use-sync-external-store": "^1.4.0",
+    "zustand": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-hook-form": ">=7.54.2",
+    "react-router": "7.3.0",
+    "use-sync-external-store": ">=1.4.0",
+    "zustand": ">=5.0.3"
   }
 }

package/src/api/crudApi.ts

@@ -1,30 +1,32 @@
-
 export const CrudApi = {
-  getList: (api: string, page: number) => {
-    return fetch(api, {
-      method: "GET",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ page }),
-    }).then((res) => res.json());
-  },
-  create: (api: string, data: any) => {
-    return fetch(api, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    }).then((res) => res.json());
-  },
-  details(api: string, id: any) {
-    return fetch(`${api}/${id}`, {
-      method: "GET",
-      headers: { "Content-Type": "application/json" },
-    }).then((res) => res.json());
-  },
-  edit(api: string, data: any) {
-    return fetch(`${api}/${data.id}`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    }).then((res) => res.json());
-  },
+	getList: (fetchSettings: { baseUrl: string }, api: string) => {
+		return fetch(`${fetchSettings.baseUrl}/${api}`, {
+			method: "GET",
+			headers: { "Content-Type": "application/json" },
+		}).then((res) => {
+			return res.json();
+		});
+	},
+	create: (fetchSettings: { baseUrl: string }, api: string, data: any) => {
+		return fetch(`${fetchSettings?.baseUrl ?? ""}/${api}`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(data),
+		}).then((res) => res.json());
+	},
+	details: (fetchSettings: { baseUrl: string }, api: string, id: any) => {
+		return fetch(`${fetchSettings?.baseUrl ?? ""}/${api}/${id}`, {
+			method: "GET",
+			headers: { "Content-Type": "application/json" },
+		}).then((res) => {
+			return res.json();
+		});
+	},
+	edit: (fetchSettings: { baseUrl: string }, api: string, data: any) => {
+		return fetch(`${fetchSettings?.baseUrl ?? ""}/${api}/${data.id}`, {
+			method: "PUT",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(data),
+		}).then((res) => res.json());
+	},
 };

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,64 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+	children: ReactNode;
+}
+
+interface State {
+	hasError: boolean;
+	error: Error | null;
+	errorInfo: ErrorInfo | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+	public state: State = {
+		hasError: false,
+		error: null,
+		errorInfo: null,
+	};
+
+	public static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error, errorInfo: null };
+	}
+
+	public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		this.setState({
+			error: error,
+			errorInfo: errorInfo,
+		});
+	}
+
+	public render() {
+		if (this.state.hasError) {
+			return (
+				<div className="error-boundary">
+					<div className="error-boundary__content">
+						<div className="error-boundary__icon">
+							<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+								<circle cx="12" cy="12" r="10" />
+								<line x1="12" y1="8" x2="12" y2="12" />
+								<line x1="12" y1="16" x2="12" y2="16" />
+							</svg>
+						</div>
+						<h1>Oops! Something went wrong</h1>
+						<p className="error-boundary__message">
+							{this.state.error?.message || "An unexpected error occurred"}
+						</p>
+						<button className="error-boundary__button" onClick={() => window.location.reload()}>
+							Refresh Page
+						</button>
+						{process.env.NODE_ENV === "development" && (
+							<details className="error-boundary__details">
+								<summary>Error Details</summary>
+								<pre>{this.state.error?.toString()}</pre>
+								<pre>{this.state.errorInfo?.componentStack}</pre>
+							</details>
+						)}
+					</div>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

package/src/components/ErrorComponent.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function ErrorComponent({ error }: { error: unknown }) {
+	return (
+		<div className="error-container">
+			<div className="error-icon">
+				<i className="fa fa-exclamation-circle" />
+			</div>
+			<div className="error-content">
+				<h3>Error Occurred</h3>
+				<p>{(error as { message?: string })?.message || "Something went wrong. Please try again later."}</p>
+			</div>
+		</div>
+	);
+}

package/src/components/Form.tsx

@@ -0,0 +1,70 @@
+import React, { useEffect } from "react";
+import { Screen } from "../types/Screen";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { CrudApi } from "../api/crudApi";
+import { useAppStore } from "../store/store";
+import { InputOptions } from "../decorators/Input";
+import { FormField } from "./FormField";
+
+export function Form({ data, screen }: { data?: any; screen: Screen }) {
+	const { screens, fetchSettings } = useAppStore((s) => ({
+		screens: s.screens ?? {},
+		fetchSettings: s.fetchSettings,
+	}));
+	const isEditForm = !!data;
+	const {
+		register,
+		handleSubmit,
+		reset,
+		formState: { errors },
+	} = useForm<any>({
+		resolver: screens[screen.controller].resolver,
+		//TODO: remove __formEdit from api
+		defaultValues: { ...data, __formEdit: isEditForm },
+	});
+	const navigate = useNavigate();
+	//const fields = screens[screen.controller].fields;
+	const inputs = screens[screen.controller].inputs;
+	useEffect(() => {
+		reset({ ...data, __formEdit: isEditForm });
+	}, [isEditForm, data, reset]);
+
+	return (
+		<div className="form-wrapper">
+			<form
+				onSubmit={handleSubmit((dataForm) => {
+					if (!fetchSettings) {
+						return;
+					}
+					delete dataForm.__formEdit;
+					if (isEditForm) {
+						CrudApi.edit(fetchSettings, screen.controller, dataForm).then(() => {
+							navigate("/" + screen.controller, {
+								replace: true,
+							});
+						});
+					} else {
+						CrudApi.create(fetchSettings, screen.controller, dataForm).then(() => {
+							navigate("/" + screen.controller, {
+								replace: true,
+							});
+						});
+					}
+				})}>
+				{inputs.map((input: InputOptions) => (
+					<FormField
+						key={input.name || ""}
+						input={input}
+						register={register}
+						isEditForm={isEditForm}
+						error={errors[input.name || ""]}
+					/>
+				))}
+				<button type="submit" className="submit-button">
+					Submit
+				</button>
+			</form>
+		</div>
+	);
+}

package/src/components/FormField.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { InputOptions } from "../decorators/Input";
+import { Label } from "./Label";
+import { UseFormRegister } from "react-hook-form";
+
+interface FormFieldProps {
+	input: InputOptions;
+	register: UseFormRegister<any>;
+	isEditForm: boolean;
+	error?: { message?: string };
+}
+
+export function FormField({ input, register, isEditForm, error }: FormFieldProps) {
+	const fieldName = input.name || "";
+
+	const renderField = () => {
+		switch (input.type) {
+			case "textarea":
+				return (
+					<textarea
+						{...register(fieldName)}
+						placeholder={input.placeholder}
+						id={fieldName}
+						disabled={isEditForm && input.editable === false}
+					/>
+				);
+			case "select":
+				return (
+					<select {...register(fieldName)} id={fieldName} disabled={isEditForm && input.editable === false}>
+						<option value="">Select {fieldName}</option>
+						{input.selectOptions?.map((option) => (
+							<option key={option} value={option}>
+								{option}
+							</option>
+						))}
+					</select>
+				);
+			case "input":
+			default: {
+				return (
+					<input
+						type={input.inputType}
+						{...register(fieldName)}
+						placeholder={input.placeholder}
+						id={fieldName}
+						disabled={isEditForm && input.editable === false}
+					/>
+				);
+			}
+		}
+	};
+
+	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/Label.tsx

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

@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
+import { ErrorBoundary } from "./ErrorBoundary";
+import { initPanel } from "../initPanel";
+import { InitPanelOptions } from "../types/initPanelOptions";
 
 type AppProps = {
 	children: React.ReactNode;
+	init: () => InitPanelOptions;
 };
 
-export function Panel({ children }: AppProps) {
-	return (
-		<>
-			{children}
-		</>
-	);
+export function Panel({ children, init }: AppProps) {
+	useEffect(() => {
+		const options = init();
+		initPanel(options);
+	}, [init]);
+
+	return <ErrorBoundary>{children}</ErrorBoundary>;
 }

package/src/components/layout/Layout.tsx

@@ -1,16 +1,20 @@
-import React from 'react';
-import { Outlet } from 'react-router';
-import { SideBar } from './SideBar';
+import React from "react";
+import { SideBar } from "./SideBar";
+import { ScreenCreatorData } from "../../types/ScreenCreatorData";
 
-export function Layout({
-  children,
+export function Layout<IconType>({
+	children,
+	menu,
+	getIcons,
 }: {
-  children?: React.ReactNode;
+	children?: React.ReactNode;
+	menu?: (screens: Record<string, ScreenCreatorData>) => { name: string; path: string; iconType: IconType }[];
+	getIcons?: (iconType: IconType) => React.ReactNode;
 }) {
-  return (
-    <div className="layout">
-      <SideBar />
-      <main className="content">{children || <Outlet />}</main>
-    </div>
-  );
+	return (
+		<div className="layout">
+			<SideBar menu={menu} getIcons={getIcons} />
+			<main className="content">{children}</main>
+		</div>
+	);
 }

package/src/components/layout/SideBar.tsx

@@ -1,16 +1,42 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import { Link } from "react-router";
+import { ScreenCreatorData } from "../../types/ScreenCreatorData";
+import { useAppStore } from "../../store/store";
 
+type GetMenuFunction<IconType> = (
+	screens: Record<string, ScreenCreatorData>
+) => { name: string; path: string; iconType: IconType }[];
 
-export function SideBar() {
-  const [isOpen, setIsOpen] = useState(true);
+type GetIconsFunction<IconType> = (iconType: IconType) => React.ReactNode;
 
-  return (
-    <div className={`sidebar ${isOpen ? 'open' : 'closed'}`}>
-      <button className='toggle-button' onClick={() => setIsOpen(!isOpen)}>
-        {isOpen ? '<' : '>'}
-      </button>
-      <nav className='nav-links'>
-      </nav>
-    </div>
-  );
+export function SideBar<IconType>({
+	menu,
+	getIcons,
+}: {
+	menu?: GetMenuFunction<IconType>;
+	getIcons?: GetIconsFunction<IconType>;
+}) {
+	const screens = useAppStore((s) => s.screens ?? {});
+	const [isOpen, setIsOpen] = useState(true);
+
+	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>
+	);
 }

package/src/components/list/List.tsx

@@ -1,75 +1,81 @@
-import React from 'react';
-import { CellOptions } from '../../declerations/Cell';
-import { Link } from 'react-router';
-import { Screen } from '../../types/Screen';
+import React from "react";
+import { CellOptions } from "../../decorators/Cell";
+import { Link } from "react-router";
+import { Screen } from "../../types/Screen";
 
 interface ListProps<T> {
-  data: T[];
-  cells: CellOptions<T>[];
-  screen: Screen;
+	data: T[];
+	cells: CellOptions[];
+	screen: Screen;
 }
 
-export function List<T>({ data, cells, screen }: ListProps<T>) {
-  if (!data || data.length === 0) {
-    return <div>No items available</div>;
-  }
+export function List<T>({ data, cells }: ListProps<T>) {
+	if (!data || data.length === 0) {
+		return <div>No items available</div>;
+	}
 
-  return (
-    <div className='list-wrapper'>
-      <div className='header'>List</div>
-      <table className='list-table'>
-        <thead>
-        <tr>
-          {cells.map((cellOptions) => (
-            <th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
-          ))}
-          <th />
-        </tr>
-        </thead>
-        <tbody>
-        {data.map((item, index) => (
-          <tr key={index}>
-            {cells.map((cellOptions) => {
-              // @ts-ignore
-              const value = item[cellOptions.name];
-              let formattedValue = value ?? '-'; // Default value if the field is undefined or null
+	return (
+		<div className="list-wrapper">
+			<div className="header">List</div>
+			<table className="list-table">
+				<thead>
+					<tr>
+						{cells.map((cellOptions) => (
+							<th key={cellOptions.name}>{cellOptions.title ?? cellOptions.name}</th>
+						))}
+						<th />
+					</tr>
+				</thead>
+				<tbody>
+					{data.map((item, index) => (
+						<tr key={index}>
+							{cells.map((cellOptions) => {
+								// @ts-ignore
+								const value = item[cellOptions.name];
+								let formattedValue = value ?? "-"; // Default value if the field is undefined or null
 
-              switch (cellOptions.type) {
-                case 'date':
-                  if (value) {
-                    const date = new Date(value);
-                    formattedValue = `${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;
+								switch (cellOptions.type) {
+									case "date":
+										if (value) {
+											const date = new Date(value);
+											formattedValue = `${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 'number':
-                case 'string':
-                default:
-                  formattedValue = value ? value.toString() : (cellOptions?.placeHolder ?? '-'); // Handles string type or default fallback
-                  break;
-              }
-              let render = formattedValue;
-              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>
-          </tr>
-        ))}
-
-        </tbody>
-      </table>
-    </div>
-  );
+									case "number":
+									case "string":
+									default:
+										formattedValue = value ? value.toString() : (cellOptions?.placeHolder ?? "-"); // Handles string type or default fallback
+										break;
+								}
+								let render = formattedValue;
+								/*
+								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>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
 }

package/src/components/screens/ControllerCreate.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+import { Screen } from "../../types/Screen";
+import { Form } from "../Form";
+
+export function ControllerCreate({ screen }: { screen: Screen }) {
+	return <Form screen={screen} />;
+}

package/src/components/screens/ControllerDetails.tsx

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