proje-react-panel 1.0.9 → 1.0.11

package/src/components/screens/ControllerEdit.tsx

@@ -0,0 +1,35 @@
+import { Form } from "../Form";
+import React, { useEffect, useState } from "react";
+import { Screen } from "../../types/Screen";
+import { useParams } from "react-router";
+import { CrudApi } from "../../api/crudApi";
+import { useAppStore } from "../../store/store";
+import { ErrorComponent } from "../ErrorComponent";
+
+export function ControllerEdit({ 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 <Form data={data} screen={screen} />;
+}

package/src/components/screens/ControllerList.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Screen } from "../../types/Screen";
+import { useEffect, useState } from "react";
+import { CrudApi } from "../../api/crudApi";
+import { Link } from "react-router";
+import { List } from "../list/List";
+import { useAppStore } from "../../store/store";
+import { ErrorComponent } from "../ErrorComponent";
+
+export function ControllerList({ screen }: { screen: Screen }) {
+	const { screens, fetchSettings } = useAppStore((s) => ({
+		screens: s.screens ?? {},
+		fetchSettings: s.fetchSettings,
+	}));
+	const [page, setPage] = useState(0);
+	const [data, setData] = useState<any>(null);
+	const [error, setError] = useState(null);
+
+	useEffect(() => {
+		if (screen.controller && fetchSettings) {
+			CrudApi.getList(fetchSettings, screen.controller)
+				.then((res) => {
+					setData(res);
+				})
+				.catch((e: any) => {
+					setError(e);
+					console.error(e);
+				});
+		}
+	}, [page, screen.controller, fetchSettings]);
+
+	if (error) {
+		return <ErrorComponent error={error} />;
+	}
+	return (
+		<div>
+			<Link to={"create"}>Create</Link>
+			{/*
+			{error ? <p>Error {error}</p> : <></>}
+*/}
+			<List screen={screen} cells={screens[screen.key].cells} data={data} />
+		</div>
+	);
+}

package/src/components/screens/Login.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { useForm } from "react-hook-form";
+import { FormField } from "../FormField";
+import { Screen } from "../../types/Screen";
+import "../../styles/login.scss";
+
+interface LoginFormData {
+	email: string;
+	password: string;
+}
+function Login() {
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<LoginFormData>();
+
+	const onSubmit = async (data: LoginFormData) => {
+		// TODO: Implement login logic
+		console.log("Login attempt:", data);
+	};
+
+	return (
+		<div className="login-container">
+			<div className="login-panel">
+				<div className="login-header">
+					<h1>Welcome Back</h1>
+					<p>Please sign in to continue</p>
+				</div>
+				<form onSubmit={handleSubmit(onSubmit)} className="login-form">
+					<FormField
+						input={{
+							name: "email",
+							label: "Email",
+							inputType: "email",
+							placeholder: "Enter your email",
+						}}
+						register={register}
+						isEditForm={false}
+						error={errors.email}
+					/>
+					<FormField
+						input={{
+							name: "password",
+							label: "Password",
+							inputType: "password",
+							placeholder: "Enter your password",
+						}}
+						register={register}
+						isEditForm={false}
+						error={errors.password}
+					/>
+					<div className="form-actions">
+						<button type="submit" className="submit-button">
+							Sign In
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	);
+}
+
+export default Login;

package/src/decorators/Cell.ts

@@ -0,0 +1,34 @@
+import "reflect-metadata";
+
+const CELL_KEY = Symbol("cell");
+
+export interface CellOptions {
+	name?: string;
+	title?: string;
+	type?: "string" | "number" | "date";
+	placeHolder?: string;
+}
+
+export function Cell(options?: CellOptions): PropertyDecorator {
+	return (target, propertyKey) => {
+		const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
+		Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
+
+		if (options) {
+			const keyString = `${CELL_KEY.toString()}:${propertyKey.toString()}:options`;
+			Reflect.defineMetadata(keyString, options, target);
+		}
+	};
+}
+
+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/Input.ts

@@ -0,0 +1,50 @@
+import "reflect-metadata";
+
+const INPUT_KEY = Symbol("input");
+
+const isFieldSensitive = (fieldName: string): boolean => {
+	return ["password"].some((term) => fieldName.toLowerCase().includes(term));
+};
+
+export interface InputOptions {
+	name?: string;
+	label?: string;
+	placeholder?: string;
+	editable?: boolean;
+	inputType?: "text" | "email" | "tel" | "password" | "number" | "date";
+	type?: "input" | "select" | "textarea";
+	selectOptions?: string[]; //TODO: label/value
+	cancelPasswordValidationOnEdit?: boolean;
+}
+
+export function Input(options?: InputOptions): PropertyDecorator {
+	return (target, propertyKey) => {
+		const existingInputs: string[] = Reflect.getMetadata(INPUT_KEY, target) || [];
+		Reflect.defineMetadata(INPUT_KEY, [...existingInputs, propertyKey.toString()], target);
+
+		if (options) {
+			const keyString = `${INPUT_KEY.toString()}:${propertyKey.toString()}:options`;
+			Reflect.defineMetadata(keyString, options, target);
+		}
+	};
+}
+
+export function getInputFields(entityClass: any): InputOptions[] {
+	const prototype = entityClass.prototype;
+	const inputFields: string[] = Reflect.getMetadata(INPUT_KEY, prototype) || [];
+	return inputFields.map((field) => {
+		const fields = Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};
+		const inputType = fields?.inputType ?? (isFieldSensitive(field) ? "password" : "text");
+		return {
+			...fields,
+			editable: fields.editable ?? true,
+			sensitive: fields.sensitive,
+			name: fields?.name ?? field,
+			label: fields?.label ?? field,
+			placeholder: fields?.placeholder ?? field,
+			inputType: inputType,
+			selectOptions: fields?.selectOptions ?? [],
+			cancelPasswordValidationOnEdit: fields?.cancelPasswordValidationOnEdit ?? inputType === "password",
+		};
+	});
+}

package/src/hooks/useScreens.tsx

@@ -0,0 +1,36 @@
+import React, { useMemo } from "react";
+import { Route } from "react-router";
+import { ControllerCreate } from "../components/screens/ControllerCreate";
+import { ControllerDetails } from "../components/screens/ControllerDetails";
+import { ControllerEdit } from "../components/screens/ControllerEdit";
+import { ControllerList } from "../components/screens/ControllerList";
+import { Screen } from "../types/Screen";
+import { useAppStore } from "../store/store";
+
+export function useScreens() {
+	const screens = useAppStore((s) => s.screens ?? {});
+	return useMemo(
+		() => (
+			<>
+				{Object.entries(screens).map(([key, screenData]) => {
+					const controllerName = screenData.crud?.controller ?? key;
+					let routePath = `${screenData.path}`;
+					const screen: Screen = {
+						key,
+						controller: controllerName,
+					};
+					return (
+						<React.Fragment key={"index"}>
+							<Route path={routePath + "/create"} element={<ControllerCreate screen={screen} />} />
+							<Route path={routePath + "/details/:id"} element={<ControllerDetails screen={screen} />} />
+							<Route path={routePath + "/edit/:id"} element={<ControllerEdit screen={screen} />} />
+							<Route path={routePath} element={<ControllerList screen={screen} />} />
+						</React.Fragment>
+					);
+				})}
+				<Route path="*" element={<div>404 - Not Found</div>} />
+			</>
+		),
+		[screens]
+	);
+}

package/src/index.ts

@@ -1,4 +1,9 @@
+export { type InitPanelOptions } from "./types/initPanelOptions";
+export { type ScreenCreatorData } from "./types/ScreenCreatorData";
 export { createScreens } from "./utils/createScreens";
-export { getScreenForRoutes } from "./utils/getScreenForRoutes";
+export { useScreens } from "./hooks/useScreens";
+export { Crud } from "./decorators/Crud";
+export { Cell } from "./decorators/Cell";
+export { Input } from "./decorators/Input";
 export { Layout } from "./components/layout/Layout";
-export {Panel} from "./components/Panel"
+export { Panel } from "./components/Panel";

package/src/initPanel.ts

@@ -0,0 +1,14 @@
+import { createScreens } from "./utils/createScreens";
+import { getFields } from "./utils/getFields";
+import { ScreenCreatorData } from "./types/ScreenCreatorData";
+import { InitPanelOptions } from "./types/initPanelOptions";
+import { useAppStore } from "./store/store";
+
+export function initPanel({ crud, fetch }: InitPanelOptions) {
+	const screensCrudOptions: Record<string, ScreenCreatorData> = {};
+	Object.entries(crud).forEach(([key, value]) => {
+		screensCrudOptions[key] = getFields(key, value);
+	});
+	createScreens(screensCrudOptions);
+	useAppStore.setState({ fetchSettings: { baseUrl: fetch.baseURL } });
+}

package/src/store/store.ts

@@ -0,0 +1,18 @@
+import { createJSONStorage, persist } from "zustand/middleware";
+import { createWithEqualityFn } from "zustand/traditional";
+import { shallow } from "zustand/vanilla/shallow";
+import { ScreenCreatorData } from "../types/ScreenCreatorData";
+
+interface AppState {
+	screens: Record<string, ScreenCreatorData> | null;
+	fetchSettings: { baseUrl: string } | null;
+}
+
+export const useAppStore = createWithEqualityFn<AppState>()(
+	persist((_) => ({ screens: null, fetchSettings: null }), {
+		name: "app-store-1",
+		storage: createJSONStorage(() => localStorage),
+		partialize: (_) => ({}),
+	}),
+	shallow
+);

package/src/styles/error-boundary.scss

@@ -0,0 +1,89 @@
+.error-boundary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 2rem;
+    background: linear-gradient(135deg, #1a1d21 0%, #121416 100%);
+
+    &__content {
+        max-width: 600px;
+        padding: 3rem;
+        text-align: center;
+        background: #2c3036;
+        border-radius: 1rem;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    }
+
+    &__icon {
+        width: 80px;
+        height: 80px;
+        margin: 0 auto 2rem;
+        color: #ff6b6b;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            stroke-width: 1.5;
+        }
+    }
+
+    h1 {
+        margin: 0 0 1rem;
+        font-size: 2rem;
+        color: #e9ecef;
+        font-weight: 600;
+    }
+
+    &__message {
+        margin: 0 0 2rem;
+        font-size: 1.1rem;
+        color: #adb5bd;
+        line-height: 1.6;
+    }
+
+    &__button {
+        padding: 0.8rem 2rem;
+        font-size: 1rem;
+        color: white;
+        background: #4dabf7;
+        border: none;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background 0.3s ease;
+
+        &:hover {
+            background: #339af0;
+        }
+    }
+
+    &__details {
+        margin-top: 2rem;
+        padding: 1rem;
+        text-align: left;
+        background: #212529;
+        border-radius: 0.5rem;
+
+        summary {
+            margin-bottom: 1rem;
+            color: #ced4da;
+            cursor: pointer;
+            font-weight: 500;
+        }
+
+        pre {
+            margin: 0;
+            padding: 1rem;
+            background: #1a1d21;
+            color: #e9ecef;
+            border-radius: 0.3rem;
+            overflow-x: auto;
+            font-size: 0.9rem;
+            line-height: 1.5;
+
+            & + pre {
+                margin-top: 1rem;
+            }
+        }
+    }
+} 

package/src/styles/form.scss

@@ -1,9 +1,10 @@
 .form-wrapper {
   max-width: 400px;
   padding: 20px;
-  background-color: #f9f9f9;
   border-radius: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  background-color: #1a1a1a;
+  color: #f2f2f2;
 
   form {
     display: flex;
@@ -17,21 +18,52 @@
       font-weight: bold;
       margin-bottom: 6px;
       display: block;
-      color: #333;
+      color: #f2f2f2;
     }
 
-    input[type='text'] {
+    input[type='text'],
+    input[type='password'],
+    input[type='email'],
+    input[type='tel'],
+    input[type='number'],
+    input[type='date'],
+    textarea,
+    select {
       padding: 10px;
       font-size: 16px;
-      border: 1px solid #ccc;
+      border: 1px solid #444;
       border-radius: 5px;
       width: 100%;
+      background-color: #333;
+      color: #f2f2f2;
       transition: border-color 0.2s;
 
       &:focus {
-        border-color: #007bff;
+        border-color: #66b2ff;
         outline: none;
       }
+
+      &:disabled {
+        background-color: #252525;
+        cursor: not-allowed;
+        opacity: 0.8;
+        border-color: #444;
+        color: #999;
+      }
+    }
+
+    textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+
+    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-repeat: no-repeat;
+      background-position: right 0.7rem top 50%;
+      background-size: 0.65rem auto;
+      padding-right: 2.5rem;
     }
 
     .error-message {

package/src/styles/index.scss

@@ -1,4 +1,22 @@
-@import 'sidebar';
-@import 'form';
-@import 'layout';
-@import 'list';
+@use './sidebar';
+@use './form';
+@use './layout';
+@use './list';
+@use './error-boundary';
+
+.layout{
+  a {
+    color: white;
+
+    &:hover,
+    &:active {
+      color: white;
+    }
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}

package/src/styles/layout.scss

@@ -10,4 +10,53 @@
     overflow-y: auto;
     transition: margin-left 0.3s ease;
   }
+
+  .error-container {
+    display: flex;
+    padding: 16px;
+    margin: 20px 0;
+    border-radius: 8px;
+    background-color: rgba(255, 77, 79, 0.1);
+    border-left: 4px solid #ff4d4f;
+    color: #f2f2f2;
+    align-items: flex-start;
+
+    .error-icon {
+      margin-right: 16px;
+      color: #ff4d4f;
+      font-size: 24px;
+      display: flex;
+      align-items: center;
+    }
+
+    .error-content {
+      flex: 1;
+
+      h3 {
+        margin: 0 0 8px;
+        font-size: 18px;
+        color: #ff4d4f;
+      }
+
+      p {
+        margin: 0;
+        font-size: 16px;
+      }
+    }
+  }
+
+  // Additional error feedback styles
+  .field-error {
+    border-color: #ff4d4f !important;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+    }
+  }
+
+  .error-message {
+    margin-top: 4px;
+    font-size: 14px;
+    color: #ff4d4f;
+  }
 }

package/src/styles/list.scss

@@ -1,15 +1,17 @@
 .list-wrapper {
   width: 100%;
   padding: 16px;
-  background-color: #ffffff;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #2b2b2b;
+  color: #e0e0e0;
 
   .header {
     font-size: 24px;
     font-weight: bold;
     text-align: center;
     margin-bottom: 20px;
+    color: #ffffff;
   }
 
   .list-table {
@@ -20,20 +22,20 @@
     td {
       padding: 12px 16px;
       text-align: left;
-      border-bottom: 1px solid #ddd;
+      border-bottom: 1px solid #444444;
     }
 
     th {
-      background-color: #007bff;
-      color: white;
+      color: #ffffff;
+      background-color: #3c3c3c;
     }
 
     tr:nth-child(even) {
-      background-color: #f9f9f9;
+      background-color: #353535;
     }
 
     tr:hover {
-      background-color: #e8f4ff;
+      background-color: #444444;
     }
   }
 }

package/src/styles/login.scss

@@ -0,0 +1,90 @@
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    padding: 20px;
+
+    .login-panel {
+        width: 100%;
+        max-width: 400px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+        padding: 32px;
+    }
+
+    .login-header {
+        text-align: center;
+        margin-bottom: 32px;
+
+        h1 {
+            font-size: 24px;
+            color: #333;
+            margin-bottom: 8px;
+        }
+
+        p {
+            color: #666;
+            font-size: 14px;
+        }
+    }
+
+    .login-form {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+
+        .form-field {
+            margin-bottom: 16px;
+
+            label {
+                display: block;
+                margin-bottom: 8px;
+                color: #333;
+                font-weight: 500;
+            }
+
+            input {
+                width: 100%;
+                padding: 12px;
+                border: 1px solid #e1e1e1;
+                border-radius: 8px;
+                font-size: 14px;
+                transition: border-color 0.2s ease;
+
+                &:focus {
+                    outline: none;
+                    border-color: #007bff;
+                    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
+                }
+            }
+        }
+
+        .form-actions {
+            margin-top: 24px;
+
+            .submit-button {
+                width: 100%;
+                padding: 12px;
+                background: #007bff;
+                color: white;
+                border: none;
+                border-radius: 8px;
+                font-size: 16px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: background-color 0.2s ease;
+
+                &:hover {
+                    background: #0056b3;
+                }
+
+                &:active {
+                    transform: translateY(1px);
+                }
+            }
+        }
+    }
+}