proje-react-panel 1.0.14 → 1.0.15

package/src/components/list/Pagination.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+
+interface PaginationProps {
+  pagination: {
+    total: number;
+    page: number;
+    limit: number;
+  };
+  onPageChange: (page: number) => void;
+}
+
+export function Pagination({ pagination, onPageChange }: PaginationProps) {
+  const { total, page, limit } = pagination;
+  const totalPages = Math.floor(total / limit);
+
+  if (totalPages <= 1) return null;
+
+  const renderPageNumbers = () => {
+    const pages = [];
+    const range = 2; // Number of pages to show before and after current page
+
+    // Always show first 2 pages
+    for (let i = 1; i <= Math.min(2, totalPages); i++) {
+      pages.push(
+        <button
+          key={i}
+          onClick={() => onPageChange(i)}
+          className={`pagination-item ${page === i ? 'active' : ''}`}
+          disabled={page === i}
+        >
+          {i}
+        </button>
+      );
+    }
+
+    // Add ellipsis if needed
+    if (page - range > 3) {
+      pages.push(
+        <span key="ellipsis1" className="pagination-ellipsis">
+          ...
+        </span>
+      );
+    }
+
+    // Show pages around current page
+    for (let i = Math.max(3, page - range); i <= Math.min(totalPages - 2, page + range); i++) {
+      if (i > 2 && i < totalPages - 1) {
+        pages.push(
+          <button
+            key={i}
+            onClick={() => onPageChange(i)}
+            className={`pagination-item ${page === i ? 'active' : ''}`}
+            disabled={page === i}
+          >
+            {i}
+          </button>
+        );
+      }
+    }
+
+    // Add ellipsis if needed
+    if (page + range < totalPages - 2) {
+      pages.push(
+        <span key="ellipsis2" className="pagination-ellipsis">
+          ...
+        </span>
+      );
+    }
+
+    // Always show last 2 pages
+    for (let i = Math.max(totalPages - 1, 3); i <= totalPages; i++) {
+      if (i > 2) {
+        pages.push(
+          <button
+            key={i}
+            onClick={() => onPageChange(i)}
+            className={`pagination-item ${page === i ? 'active' : ''}`}
+            disabled={page === i}
+          >
+            {i}
+          </button>
+        );
+      }
+    }
+
+    return pages;
+  };
+
+  return (
+    <div className="pagination">
+      <button
+        onClick={() => onPageChange(page - 1)}
+        className={`pagination-item ${page === 1 ? 'disabled' : ''}`}
+        disabled={page === 1}
+        aria-disabled={page === 1}
+      >
+        Previous
+      </button>
+      {renderPageNumbers()}
+      <button
+        onClick={() => onPageChange(page + 1)}
+        className={`pagination-item ${page === totalPages ? 'disabled' : ''}`}
+        disabled={page === totalPages}
+        aria-disabled={page === totalPages}
+      >
+        Next
+      </button>
+    </div>
+  );
+}

package/src/components/list/index.ts

@@ -0,0 +1 @@
+ 

package/src/components/pages/ControllerDetails.tsx

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

package/src/components/pages/FormPage.tsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+import { InnerForm } from '../components';
+import { AnyClass } from '../../types/AnyClass';
+import { getFormFields } from '../../decorators/form/getFormFields';
+
+export type GetDetailsDataFN<T> = (param: string) => Promise<T>;
+export type OnSubmitFN<T> = (data: T) => Promise<T>;
+
+export interface FormPageProps<T extends AnyClass> {
+  model: T;
+  getDetailsData?: GetDetailsDataFN<T>;
+  redirect?: string;
+  onSubmit: OnSubmitFN<T>;
+}
+
+export function FormPage<T extends AnyClass>({
+  model,
+  getDetailsData,
+  onSubmit,
+  redirect,
+  ...rest
+}: FormPageProps<T>) {
+  const formOptions = useMemo(() => getFormFields(model), [model]);
+  return (
+    <InnerForm
+      getDetailsData={getDetailsData}
+      redirect={redirect}
+      onSubmit={onSubmit}
+      formOptions={formOptions}
+    />
+  );
+}

package/src/components/pages/ListPage.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useCallback } from 'react';
+import { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router';
+import { Datagrid } from '../list/Datagrid';
+import { ErrorComponent } from '../components/ErrorComponent';
+import { LoadingScreen } from '../components/LoadingScreen';
+import { AnyClass } from '../../types/AnyClass';
+import { getListFields } from '../../decorators/list/getListFields';
+import { Pagination } from '../list/Pagination';
+
+export interface PaginationParams {
+  page?: number;
+  limit?: number;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export type GetDataForList<T> = ({
+  page,
+}: PaginationParams) => PaginatedResponse<T> | Promise<PaginatedResponse<T>>;
+
+export function ListPage<T extends AnyClass>({
+  model,
+  getData,
+}: {
+  model: T;
+  getData: GetDataForList<T>;
+}) {
+  const [loading, setLoading] = useState(true);
+  const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<unknown | null>(null);
+  const listData = useMemo(() => getListFields(model), [model]);
+  const params = useParams();
+
+  const fetchData = useCallback(
+    async (page: number) => {
+      setLoading(true);
+      try {
+        const result = await getData({ page });
+        setData(result.data);
+        setPagination({
+          total: result.total,
+          page: result.page,
+          limit: result.limit,
+        });
+      } catch (e: unknown) {
+        setError(e);
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [getData]
+  );
+
+  useEffect(() => {
+    fetchData(parseInt(params.page as string) || 1);
+  }, [fetchData, params.page]);
+
+  if (loading) return <LoadingScreen />;
+  if (error) return <ErrorComponent error={error} />;
+
+  return (
+    <div className="list">
+      <div className="list-header">
+        <Link to={'create'}>Create</Link>
+      </div>
+      <Datagrid cells={listData.cells} data={data} />
+      <div className="list-footer">
+        <Pagination
+          pagination={pagination}
+          onPageChange={(page: number) => {
+            fetchData(page);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/pages/Login.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { FormField } from '../components/FormField';
+import { useNavigate } from 'react-router';
+import { useAppStore } from '../../store/store';
+
+interface LoginFormData {
+  username: string;
+  password: string;
+}
+
+export type OnLogin = {
+  login: (username: string, password: string) => Promise<LoginResponse>;
+};
+
+interface LoginResponse {
+  user: any; // Replace with proper user type if available
+  token: string;
+}
+
+interface LoginProps {
+  onLogin: OnLogin;
+}
+
+export function Login({ onLogin }: LoginProps) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>();
+  const navigate = useNavigate();
+  const onSubmit = async (data: LoginFormData) => {
+    onLogin.login(data.username, data.password).then((dataInner: LoginResponse) => {
+      const { user, token } = dataInner;
+      localStorage.setItem('token', token);
+      useAppStore.setState({ user });
+      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',
+              placeholder: 'Enter your username',
+              type: 'input',
+            }}
+            register={register}
+            error={errors.username}
+          />
+          <FormField
+            input={{
+              name: 'password',
+              label: 'Password',
+              inputType: 'password',
+              placeholder: 'Enter your password',
+              type: 'input',
+            }}
+            register={register}
+            error={errors.password}
+          />
+          <div className="form-actions">
+            <button type="submit" className="submit-button">
+              Sign In
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/decorators/form/Form.ts

@@ -0,0 +1,18 @@
+import "reflect-metadata";
+import { AnyClass } from "../../types/AnyClass";
+
+const FORM_METADATA_KEY = "FormMetadata"; // More descriptive name indicating it's a metadata key
+
+export interface FormConfiguration {} // Better describes that this is configuration/options for the form
+
+export function FormDecorator(options?: FormConfiguration): ClassDecorator {
+	return (target: Function) => {
+		if (options) {
+			Reflect.defineMetadata(FORM_METADATA_KEY, options, target);
+		}
+	};
+}
+
+export function getFormConfiguration(entityClass: AnyClass): FormConfiguration | undefined {
+	return Reflect.getMetadata(FORM_METADATA_KEY, entityClass);
+}

package/src/decorators/form/FormOptions.ts

@@ -0,0 +1,8 @@
+import { FormConfiguration } from "./Form";
+import { InputOptions } from "./Input";
+
+export interface FormOptions {
+	resolver: any; //TODO: type
+	form?: FormConfiguration;
+	inputs?: InputOptions[];
+}

package/src/decorators/form/Input.ts

@@ -0,0 +1,52 @@
+import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
+
+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;
+  inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
+  type?: 'input' | 'select' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden';
+  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<T extends AnyClass>(entityClass: T): 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,
+      type: fields?.type ?? 'input',
+      selectOptions: fields?.selectOptions ?? [],
+      cancelPasswordValidationOnEdit:
+        fields?.cancelPasswordValidationOnEdit ?? inputType === 'password',
+    };
+  });
+}

package/src/decorators/form/getFormFields.ts

@@ -0,0 +1,13 @@
+import { AnyClass } from "../../types/AnyClass";
+import { FormOptions } from "./FormOptions";
+import { getInputFields } from "./Input";
+import { getFormConfiguration } from "./Form";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+
+export function getFormFields<T extends AnyClass>(entityClass: T): FormOptions {
+	return {
+		resolver: classValidatorResolver(entityClass as any),
+		form: getFormConfiguration(entityClass),
+		inputs: getInputFields<T>(entityClass),
+	};
+}

package/src/decorators/{Cell.ts → list/Cell.ts}

@@ -1,11 +1,11 @@
 import "reflect-metadata";
 
-const CELL_KEY = Symbol("cell");
+export const CELL_KEY = Symbol("cell");
 
 export interface CellOptions {
 	name?: string;
 	title?: string;
-	type?: "string" | "number" | "date";
+	type?: "string" | "date" | "image";
 	placeHolder?: string;
 }
 
@@ -20,15 +20,3 @@ export function Cell(options?: CellOptions): PropertyDecorator {
 		}
 	};
 }
-
-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/list/GetCellFields.ts

@@ -0,0 +1,13 @@
+import { CELL_KEY, CellOptions } from "./Cell";
+
+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/list/ImageCell.ts

@@ -0,0 +1,13 @@
+import "reflect-metadata";
+import { Cell, CellOptions } from "./Cell";
+
+export interface ImageCellOptions extends CellOptions {
+	baseUrl: string;
+}
+
+export function ImageCell(options?: ImageCellOptions): PropertyDecorator {
+	return Cell({
+		...options,
+		type: "image",
+	});
+}

package/src/decorators/list/List.ts

@@ -0,0 +1,17 @@
+import "reflect-metadata";
+
+const LIST_KEY = "List";
+
+export interface ListOptions {}
+
+export function List(options?: ListOptions): ClassDecorator {
+	return (target: Function) => {
+		if (options) {
+			Reflect.defineMetadata(LIST_KEY, options, target);
+		}
+	};
+}
+
+export function getClassListData(entityClass: any): ListOptions | undefined {
+	return Reflect.getMetadata(LIST_KEY, entityClass);
+}

package/src/decorators/list/ListData.ts

@@ -0,0 +1,7 @@
+import { ListOptions } from "./List";
+import { CellOptions } from "./Cell";
+
+export interface ListData {
+	list?: ListOptions;
+	cells: CellOptions[];
+}

package/src/decorators/list/getListFields.ts

@@ -0,0 +1,10 @@
+import { getClassListData } from "./List";
+import { getCellFields } from "./GetCellFields";
+import { ListData } from "./ListData";
+
+export function getListFields<T>(entityClass: T): ListData {
+	return {
+		list: getClassListData(entityClass),
+		cells: getCellFields(entityClass),
+	};
+}

package/src/index.ts

@@ -1,10 +1,23 @@
-export { Login } from "./components/screens/Login";
-export { type InitPanelOptions } from "./types/initPanelOptions";
-export { type ScreenCreatorData } from "./types/ScreenCreatorData";
-export { createScreens } from "./utils/createScreens";
-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 type { OnSubmitFN, GetDetailsDataFN } from './components/pages/FormPage';
+export type { GetDataForList } from './components/pages/ListPage';
+export type { PaginatedResponse, PaginationParams } from './components/pages/ListPage';
+export type { InitPanelOptions } from './types/initPanelOptions';
+export type { ScreenCreatorData } from './types/ScreenCreatorData';
+export type { OnLogin } from './components/pages/Login';
+export type { AnyClass } from './types/AnyClass';
+
+export { ListPage } from './components/pages/ListPage';
+export { FormPage } from './components/pages/FormPage';
+export type { FormPageProps } from './components/pages/FormPage';
+export { Login } from './components/pages/Login';
+export { Layout } from './components/layout/Layout';
+export { Panel } from './components/Panel';
+export { Counter } from './components/components/Counter';
+
+//TODO: decerator index.ts ayır
+export { List } from './decorators/list/List';
+export { ImageCell } from './decorators/list/ImageCell';
+export { Crud } from './decorators/Crud';
+export { Cell } from './decorators/list/Cell';
+export { Input } from './decorators/form/Input';
+// Export page components

package/src/initPanel.ts

@@ -1,14 +1,6 @@
-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";
+import { InitPanelOptions } from './types/initPanelOptions';
+import { useAppStore } from './store/store';
 
-export function initPanel({ crud, fetch, screenPaths }: 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 }, screenPaths });
+export function initPanel({ screenPaths }: InitPanelOptions) {
+  useAppStore.setState({ screenPaths });
 }

package/src/store/store.ts

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