proje-react-panel 1.0.14-test-3 → 1.0.15

package/dist/screens/Form.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { Screen } from "../types/Screen";
-export declare function Form({ data, screen }: {
-    data?: any;
-    screen: Screen;
-}): React.JSX.Element;

package/dist/src/api/crudApi.d.ts

@@ -1,6 +0,0 @@
-export declare const CrudApi: {
-    getList: (api: string, page: number) => Promise<any>;
-    create: (api: string, data: any) => Promise<any>;
-    details(api: string, id: any): Promise<any>;
-    edit(api: string, data: any): Promise<any>;
-};

package/dist/src/components/Panel.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-type AppProps = {
-    children: React.ReactNode;
-    setFetchSettings: () => {
-        baseUrl: string;
-    };
-};
-export declare function Panel({ children, setFetchSettings }: AppProps): React.JSX.Element;
-export {};

package/dist/src/components/layout/Layout.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { ScreenCreatorData } from "../../types/ScreenCreatorData";
-export declare function Layout<IconType>({ children, menu, getIcons, }: {
-    children?: React.ReactNode;
-    menu?: (screens: Record<string, ScreenCreatorData<any>>) => {
-        name: string;
-        path: string;
-        iconType: IconType;
-    }[];
-    getIcons?: (iconType: IconType) => React.ReactNode;
-}): React.JSX.Element;

package/dist/src/components/layout/SideBar.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { ScreenCreatorData } from "../../types/ScreenCreatorData";
-export declare function SideBar<IconType>({ menu, getIcons, }: {
-    menu?: (screens: Record<string, ScreenCreatorData<any>>) => {
-        name: string;
-        path: string;
-        iconType: IconType;
-    }[];
-    getIcons?: (iconType: IconType) => React.ReactNode;
-}): React.JSX.Element;

package/dist/src/components/list/List.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-import { CellOptions } from "../../decorators/Cell";
-import { Screen } from "../../types/Screen";
-interface ListProps<T> {
-    data: T[];
-    cells: CellOptions<T>[];
-    screen: Screen;
-}
-export declare function List<T>({ data, cells, screen }: ListProps<T>): React.JSX.Element;
-export {};

package/dist/src/decorators/Cell.d.ts

@@ -1,10 +0,0 @@
-import 'reflect-metadata';
-export interface CellOptions<T> {
-    name?: string;
-    title?: string;
-    type?: 'string' | 'number' | 'date';
-    placeHolder?: string;
-    linkTo?: (item: T) => string;
-}
-export declare function Cell<T>(options?: CellOptions<T>): PropertyDecorator;
-export declare function getCellFields<T>(entityClass: any): CellOptions<T>[];

package/dist/src/decorators/Crud.d.ts

@@ -1,6 +0,0 @@
-import 'reflect-metadata';
-export interface CrudOptions {
-    controller: string;
-}
-export declare function Crud(options?: CrudOptions): ClassDecorator;
-export declare function getClassCrudData(entityClass: any): CrudOptions | undefined;

package/dist/src/index.d.ts

@@ -1,8 +0,0 @@
-export { type ScreenCreatorData } from "./types/ScreenCreatorData";
-export { createScreens } from "./utils/createScreens";
-export { getFields } from "./utils/getFields";
-export { getScreens } from "./utils/getScreens";
-export { Crud } from "./decorators/Crud";
-export { Cell } from "./decorators/Cell";
-export { Layout } from "./components/layout/Layout";
-export { Panel } from "./components/Panel";

package/dist/src/screens/ControllerCreate.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Screen } from '../types/Screen';
-export declare function ControllerCreate({ screen }: {
-    screen: Screen;
-}): React.JSX.Element;

package/dist/src/screens/ControllerEdit.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { Screen } from '../types/Screen';
-export declare function ControllerEdit({ screen }: {
-    screen: Screen;
-}): React.JSX.Element;

package/dist/src/screens/ControllerList.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { Screen } from "../types/Screen";
-export declare function ControllerList({ screen }: {
-    screen: Screen;
-}): React.JSX.Element;

package/dist/src/screens/Form.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-import { Screen } from "../types/Screen";
-export declare function Form({ data, screen }: {
-    data?: any;
-    screen: Screen;
-}): React.JSX.Element;

package/dist/src/store/store.d.ts

@@ -1,19 +0,0 @@
-import { ScreenCreatorData } from "../types/ScreenCreatorData";
-interface AppState {
-    screens: Record<string, ScreenCreatorData<any>> | null;
-    fetchSettings: {
-        baseUrl: string;
-    } | null;
-}
-export declare const useAppStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<AppState>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<AppState, unknown>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: AppState) => void) => () => void;
-        onFinishHydration: (fn: (state: AppState) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<AppState, unknown>>;
-    };
-}>;
-export {};

package/dist/src/types/Screen.d.ts

@@ -1,4 +0,0 @@
-export interface Screen {
-    key: string;
-    controller: string;
-}

package/dist/src/types/ScreenCreatorData.d.ts

@@ -1,8 +0,0 @@
-import { CellOptions } from "../decorators/Cell";
-import { CrudOptions } from "../decorators/Crud";
-export interface ScreenCreatorData<T> {
-    resolver: any;
-    fields: string[];
-    cells: CellOptions<T>[];
-    crud: CrudOptions;
-}

package/dist/src/utils/createScreens.d.ts

@@ -1 +0,0 @@
-export declare function createScreens(screens: Record<string, any>): void;

package/dist/src/utils/getFields.d.ts

@@ -1,2 +0,0 @@
-import { ScreenCreatorData } from "../types/ScreenCreatorData";
-export declare function getFields<T>(entityClass: T): ScreenCreatorData<T>;

package/dist/src/utils/getScreens.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function getScreens(): React.JSX.Element;

package/dist/utils/crudScreens.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function CrudScreens(): React.JSX.Element;

package/dist/utils/getScreens.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function getScreens(): React.JSX.Element;

package/src/api/AuthApi.ts

@@ -1,14 +0,0 @@
-export const AuthApi = {
-	login: (fetchSettings: { baseUrl: string }, username: string, password: string) => {
-		return fetch(`${fetchSettings.baseUrl}/auth/login`, {
-			method: "POST",
-			body: JSON.stringify({ username, password }),
-			headers: { "Content-Type": "application/json" },
-		}).then((res) => {
-			if (res.ok) {
-				return res.json();
-			}
-			throw res;
-		});
-	},
-};

package/src/components/Form.tsx

@@ -1,80 +0,0 @@
-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,
-	}));
-	console.log("form started");
-	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) => {
-						console.log("fetch started");
-						if (!fetchSettings) {
-							console.log("cancelled due to fetchSettings null");
-							return;
-						}
-						delete dataForm.__formEdit;
-						if (isEditForm) {
-							console.log("CrudApi.edit called");
-							CrudApi.edit(fetchSettings, screen.controller, dataForm).then(() => {
-								navigate("/" + screen.controller, {
-									replace: true,
-								});
-							});
-						} else {
-							console.log("CrudApi.create called");
-							CrudApi.create(fetchSettings, screen.controller, dataForm).then(() => {
-								navigate("/" + screen.controller, {
-									replace: true,
-								});
-							});
-						}
-					},
-					(errors, event) => {
-						console.log("error creating creation", errors, event);
-					}
-				)}>
-				{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

@@ -1,60 +0,0 @@
-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/list/List.tsx

@@ -1,81 +0,0 @@
-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[];
-	screen: Screen;
-}
-
-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
-
-								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>
-	);
-}

package/src/components/screens/ControllerCreate.tsx

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

@@ -1,40 +0,0 @@
-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/>"),
-			}}
-		/>
-	);
-}

package/src/components/screens/ControllerEdit.tsx

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

@@ -1,45 +0,0 @@
-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, token } = useAppStore((s) => ({
-		screens: s.screens ?? {},
-		fetchSettings: s.fetchSettings,
-		token: s.token,
-	}));
-	const [page, setPage] = useState(0);
-	const [data, setData] = useState<any>(null);
-	const [error, setError] = useState(null);
-
-	useEffect(() => {
-		if (screen.controller && fetchSettings && token) {
-			CrudApi.getList({ ...fetchSettings, token }, 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

@@ -1,68 +0,0 @@
-import React from "react";
-import { useForm } from "react-hook-form";
-import { FormField } from "../FormField";
-import { AuthApi } from "../../api/AuthApi";
-import { useAppStore } from "../../store/store";
-import { useNavigate } from "react-router";
-
-interface LoginFormData {
-	username: string;
-	password: string;
-}
-
-export function Login() {
-	const {
-		register,
-		handleSubmit,
-		formState: { errors },
-	} = useForm<LoginFormData>();
-	const { fetchSettings } = useAppStore((s) => ({ fetchSettings: s.fetchSettings }));
-	const navigate = useNavigate();
-	const onSubmit = async (data: LoginFormData) => {
-		AuthApi.login(fetchSettings!, data.username, data.password).then((dataInner) => {
-			const { access_token, admin } = dataInner;
-			useAppStore.setState({ user: admin, token: access_token });
-			navigate("/");
-		});
-	};
-
-	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: "username",
-							label: "Username",
-							inputType: "text",
-							placeholder: "Enter your username",
-						}}
-						register={register}
-						isEditForm={false}
-						error={errors.username}
-					/>
-					<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>
-	);
-}

package/src/decorators/Input.ts

@@ -1,50 +0,0 @@
-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",
-		};
-	});
-}