proje-react-panel 1.0.17 → 1.1.0

package/src/components/list/ListHeader.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { Link } from 'react-router';
+import { AnyClass } from '../../types/AnyClass';
+import CreateIcon from '../../assets/icons/svg/create.svg';
+import FilterIcon from '../../assets/icons/svg/filter.svg';
+import { ListPageMeta } from '../../decorators/list/getListPageMeta';
+
+interface ListHeaderProps<T extends AnyClass> {
+  listPageMeta: ListPageMeta<T>;
+  filtered: boolean;
+  onFilterClick: () => void;
+  customHeader?: React.ReactNode;
+}
+
+export function ListHeader<T extends AnyClass>({
+  listPageMeta,
+  filtered,
+  onFilterClick,
+  customHeader,
+}: ListHeaderProps<T>) {
+  const fields = useMemo(
+    () => listPageMeta.cells.filter(cell => !!cell.filter),
+    [listPageMeta.cells]
+  );
+
+  const header = listPageMeta.class.headers;
+  return (
+    <div className="list-header">
+      <div className="header-title">{header?.title || 'List'}</div>
+      {customHeader && <div className="header-custom">{customHeader}</div>}
+      <div className="header-actions">
+        {!!fields.length && (
+          <button onClick={onFilterClick} className="filter-button">
+            <FilterIcon className={`icon icon-filter ${filtered ? 'active' : ''}`} />
+            Filter
+          </button>
+        )}
+        {header?.create && (
+          <Link to={header.create.path} className="create-button">
+            <CreateIcon className="icon icon-create" />
+            {header.create.label}
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/{components/list → list}/ListPage.tsx

@@ -1,85 +1,30 @@
 import React, { useMemo, useCallback, useEffect, useState } from 'react';
-import { Link, useParams, useNavigate } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import { Datagrid } from './Datagrid';
 import { ErrorComponent } from '../ErrorComponent';
 import { LoadingScreen } from '../LoadingScreen';
-import { AnyClass } from '../../../types/AnyClass';
-import { getListFields } from '../../../decorators/list/getListFields';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { Pagination } from './Pagination';
-import { ListData } from '../../../decorators/list/ListData';
-import CreateIcon from '../../../assets/icons/svg/create.svg';
-import FilterIcon from '../../../assets/icons/svg/filter.svg';
+import { ListHeader } from './ListHeader';
 import { FilterPopup } from './FilterPopup';
-
-export interface GetDataParams {
-  page?: number;
-  limit?: number;
-  filters?: Record<string, any>;
-}
-
-export interface PaginatedResponse<T> {
-  data: T[];
-  total: number;
-  page: number;
-  limit: number;
-}
-
-export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
-
-const ListHeader = <T extends AnyClass>({
-  listData,
-  filtered,
-  onFilterClick,
-  customHeader,
-}: {
-  listData: ListData<T>;
-  filtered: boolean;
-  onFilterClick: () => void;
-  customHeader?: React.ReactNode;
-}) => {
-  const fields = useMemo(() => listData.cells.filter(cell => !!cell.filter), [listData.cells]);
-
-  const header = listData.list?.headers;
-  return (
-    <div className="list-header">
-      <div className="header-title">{header?.title || 'List'}</div>
-      {customHeader && <div className="header-custom">{customHeader}</div>}
-      <div className="header-actions">
-        {!!fields.length && (
-          <button onClick={onFilterClick} className="filter-button">
-            <FilterIcon className={`icon icon-filter ${filtered ? 'active' : ''}`} />
-            Filter
-          </button>
-        )}
-        {header?.create && (
-          <Link to={header.create.path} className="create-button">
-            <CreateIcon className="icon icon-create" />
-            {header.create.label}
-          </Link>
-        )}
-      </div>
-    </div>
-  );
-};
+import { getListPageMeta } from '../../decorators/list/getListPageMeta';
 
 export function ListPage<T extends AnyClass>({
   model,
-  getData,
-  onRemoveItem,
   customHeader,
 }: {
-  model: T;
-  getData: GetDataForList<T>;
+  model: AnyClassConstructor<T>;
   customHeader?: React.ReactNode;
-  onRemoveItem?: (item: T) => Promise<void>;
 }) {
+  const listPageMeta = useMemo(() => getListPageMeta(model), [model]);
+
   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);
+
+  const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   const [activeFilters, setActiveFilters] = useState<Record<string, string>>();
-  const listData = useMemo(() => getListFields(model), [model]);
   const params = useParams();
   const navigate = useNavigate();
 
@@ -87,7 +32,10 @@ export function ListPage<T extends AnyClass>({
     async (page: number, filters?: Record<string, string>) => {
       setLoading(true);
       try {
-        const result = await getData({ page, filters: filters ?? activeFilters ?? {} });
+        const result = await listPageMeta.class.getData({
+          page,
+          filters: filters ?? activeFilters ?? {},
+        });
         setData(result.data);
         setPagination({
           total: result.total,
@@ -101,7 +49,7 @@ export function ListPage<T extends AnyClass>({
         setLoading(false);
       }
     },
-    [getData, activeFilters]
+    [activeFilters, listPageMeta.class.getData]
   );
 
   useEffect(() => {
@@ -117,7 +65,7 @@ export function ListPage<T extends AnyClass>({
     if (activeFilters) {
       fetchData(parseInt(params.page as string) || 1, activeFilters);
     }
-  }, [fetchData, params.page, activeFilters]);
+  }, [fetchData, params.page, activeFilters, listPageMeta.class.getData]);
 
   const handleFilterApply = (filters: Record<string, any>) => {
     setActiveFilters(filters);
@@ -141,26 +89,16 @@ export function ListPage<T extends AnyClass>({
   return (
     <div className="list">
       <ListHeader
-        listData={listData}
+        listPageMeta={listPageMeta}
         filtered={!!(activeFilters && !!Object.keys(activeFilters).length)}
         onFilterClick={() => setIsFilterOpen(true)}
         customHeader={customHeader}
       />
       <Datagrid
-        listData={listData}
+        listPageMeta={listPageMeta}
         data={data}
-        onRemoveItem={async (item: T) => {
-          if (onRemoveItem) {
-            alert({
-              title: 'Are you sure you want to delete this item?',
-              message: 'This action cannot be undone.',
-              onConfirm: async () => {
-                await onRemoveItem(item);
-                //setData(data.filter((d: T) => d.id !== item.id));
-                await fetchData(pagination.page);
-              },
-            });
-          }
+        onRemoveItem={async () => {
+          await fetchData(pagination.page);
         }}
       />
       <div className="list-footer">
@@ -171,7 +109,7 @@ export function ListPage<T extends AnyClass>({
         activeFilters={activeFilters}
         onClose={() => setIsFilterOpen(false)}
         onApplyFilters={handleFilterApply}
-        listData={listData}
+        listPageMeta={listPageMeta}
       />
     </div>
   );

package/src/decorators/details/Details.ts

@@ -0,0 +1,31 @@
+import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
+
+const DETAILS_METADATA_KEY = 'DetailsMetaData';
+export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
+
+interface DetailsOptions<T extends AnyClass> {
+  getDetailsData: GetDetailsDataFN<T>;
+}
+
+export interface DetailsConfiguration<T extends AnyClass> extends DetailsOptions<T> {}
+
+export function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
+    }
+  };
+}
+
+export function getDetailsConfiguration<T extends AnyClass>(
+  entityClass: T
+): DetailsConfiguration<T> {
+  const detailsConfiguration = Reflect.getMetadata(DETAILS_METADATA_KEY, entityClass);
+  if (!detailsConfiguration) {
+    throw new Error('Details decerator should be used on class');
+  }
+  return {
+    ...detailsConfiguration,
+  };
+}

package/src/decorators/details/DetailsItem.ts

@@ -0,0 +1,40 @@
+import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
+
+const DETAILS_ITEM_KEY = Symbol('detailsItem');
+
+interface DetailsItemOptions {
+  //NOTE: all optional to support autoFields merging
+  name?: string;
+}
+export interface DetailsItemConfiguration extends DetailsItemOptions {
+  name: string;
+}
+
+export function DetailsItem(options?: DetailsItemOptions): PropertyDecorator {
+  return (target, propertyKey) => {
+    const existingInputs: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, target) || [];
+    Reflect.defineMetadata(DETAILS_ITEM_KEY, [...existingInputs, propertyKey.toString()], target);
+
+    if (options) {
+      const keyString = `${DETAILS_ITEM_KEY.toString()}:${propertyKey.toString()}:options`;
+      Reflect.defineMetadata(keyString, options, target);
+    }
+  };
+}
+
+export function getDetailsItemFields<T extends AnyClass>(
+  entityClass: T
+): DetailsItemConfiguration[] {
+  const prototype = (entityClass as any).prototype;
+  const inputFields: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, prototype) || [];
+
+  return inputFields.map(field => {
+    const fields: DetailsItemOptions =
+      Reflect.getMetadata(`${DETAILS_ITEM_KEY.toString()}:${field}:options`, prototype) || {};
+    return {
+      ...fields,
+      name: fields.name || field,
+    };
+  });
+}

package/src/decorators/details/getDetailsPageMeta.ts

@@ -0,0 +1,15 @@
+import { AnyClass } from '../../types/AnyClass';
+import { DetailsItemConfiguration, getDetailsItemFields } from './DetailsItem';
+import { DetailsConfiguration, getDetailsConfiguration } from './Details';
+
+export interface DetailsPageMeta<T extends AnyClass> {
+  class: DetailsConfiguration<T>;
+  items: DetailsItemConfiguration[];
+}
+
+export function getDetailsPageMeta<T extends AnyClass>(entityClass: T): DetailsPageMeta<T> {
+  return {
+    class: getDetailsConfiguration(entityClass),
+    items: getDetailsItemFields<T>(entityClass),
+  };
+}

package/src/decorators/form/Form.ts

@@ -1,18 +1,43 @@
-import "reflect-metadata";
-import { AnyClass } from "../../types/AnyClass";
+import 'reflect-metadata';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
+import { GetDetailsDataFN } from '../details/Details';
+import { InputConfiguration } from './Input';
 
-const FORM_METADATA_KEY = "FormMetadata"; // More descriptive name indicating it's a metadata key
+const DETAILS_METADATA_KEY = 'DetailsMetaData';
+export type OnSubmitFN<T> = (data: T | FormData) => Promise<T | FormData>;
 
-export interface FormConfiguration {} // Better describes that this is configuration/options for the form
+interface FormOptions<T extends AnyClass> {
+  onSubmit: OnSubmitFN<T>;
+  getDetailsData?: GetDetailsDataFN<T>;
+  onSelectPreloader?: (
+    inputOptions: InputConfiguration
+  ) => Promise<{ label: string; value: string }[]>;
+  redirectBackOnSuccess?: boolean;
+  type?: 'json' | 'formData';
+}
+
+export interface FormConfiguration<T extends AnyClass> extends FormOptions<T> {
+  redirectBackOnSuccess: boolean;
+  type: 'json' | 'formData';
+}
 
-export function FormDecorator(options?: FormConfiguration): ClassDecorator {
-	return (target: Function) => {
-		if (options) {
-			Reflect.defineMetadata(FORM_METADATA_KEY, options, target);
-		}
-	};
+export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {
+  return (target: Function) => {
+    if (options) {
+      Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
+    }
+  };
 }
 
-export function getFormConfiguration(entityClass: AnyClass): FormConfiguration | undefined {
-	return Reflect.getMetadata(FORM_METADATA_KEY, entityClass);
+export function getFormConfiguration<T extends AnyClass, K extends AnyClassConstructor<T>>(
+  entityClass: K
+): FormConfiguration<T> {
+  const formConfiguration = Reflect.getMetadata(DETAILS_METADATA_KEY, entityClass as Object);
+  if (!formConfiguration) {
+    throw new Error('Form decerator should be used on class');
+  }
+  return {
+    ...formConfiguration,
+    type: formConfiguration.type ?? 'json',
+  };
 }

package/src/decorators/form/Input.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 
 const INPUT_KEY = Symbol('input');
 
@@ -15,7 +15,12 @@ export interface InputOptions {
   placeholder?: string;
   cancelPasswordValidationOnEdit?: boolean;
   options?: { value: string; label: string }[];
-  nestedFields?: InputOptions[];
+  optionsPreload?: boolean;
+  nestedFields?: InputConfiguration[];
+}
+
+export interface InputConfiguration extends InputOptions {
+  name: string;
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {
@@ -30,8 +35,10 @@ export function Input(options?: InputOptions): PropertyDecorator {
   };
 }
 
-export function getInputFields<T extends AnyClass>(entityClass: T): InputOptions[] {
-  const prototype = entityClass.prototype;
+export function getInputFields<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): InputConfiguration[] {
+  const prototype = (entityClass as any).prototype;
   const inputFields: string[] = Reflect.getMetadata(INPUT_KEY, prototype) || [];
   return inputFields.map(field => {
     const fields = Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};

package/src/decorators/form/getFormPageMeta.ts

@@ -0,0 +1,21 @@
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
+import { getInputFields, InputConfiguration } from './Input';
+import { FormConfiguration, getFormConfiguration } from './Form';
+import { classValidatorResolver } from '@hookform/resolvers/class-validator';
+import { Resolver } from 'react-hook-form';
+
+export interface FormPageMeta<T extends AnyClass> {
+  resolver: Resolver<T>;
+  class: FormConfiguration<T>;
+  inputs: InputConfiguration[];
+}
+
+export function getFormPageMeta<T extends AnyClass, K extends AnyClassConstructor<T>>(
+  entityClass: K
+): FormPageMeta<T> {
+  return {
+    resolver: classValidatorResolver(entityClass),
+    class: getFormConfiguration(entityClass),
+    inputs: getInputFields(entityClass),
+  };
+}

package/src/decorators/list/Cell.ts

@@ -1,4 +1,5 @@
 import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
 
 export const CELL_KEY = Symbol('cell');
 
@@ -11,15 +12,39 @@ export interface StaticSelectFilter extends Filter {
   options: { value: string; label: string }[];
 }
 
+export type CellTypes = 'string' | 'date' | 'number' | 'boolean' | 'uuid';
+export type ExtendedCellTypes = CellTypes | 'image';
+
 export interface CellOptions {
   name?: string;
   title?: string;
-  type?: 'string' | 'date' | 'image' | 'number';
+  type?: CellTypes;
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
 }
+export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {
+  type?: ExtendedCellTypes;
+}
+
+export interface CellConfiguration extends Omit<CellOptions, 'type'> {
+  name: string;
+  type: ExtendedCellTypes;
+}
 
 export function Cell(options?: CellOptions): PropertyDecorator {
+  //TODO: reduce all similar code
+  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 ExtendedCell(options?: ExtendedCellOptions): PropertyDecorator {
   return (target, propertyKey) => {
     const existingCells: string[] = Reflect.getMetadata(CELL_KEY, target) || [];
     Reflect.defineMetadata(CELL_KEY, [...existingCells, propertyKey.toString()], target);
@@ -30,3 +55,18 @@ export function Cell(options?: CellOptions): PropertyDecorator {
     }
   };
 }
+
+export function getCellFields<T extends AnyClass>(entityClass: T): CellConfiguration[] {
+  const prototype = (entityClass as any).prototype;
+  const inputFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
+
+  return inputFields.map(field => {
+    const fields: CellOptions =
+      Reflect.getMetadata(`${CELL_KEY.toString()}:${field}:options`, prototype) || {};
+    return {
+      ...fields,
+      name: fields.name || field,
+      type: fields.type as ExtendedCellTypes,
+    };
+  });
+}

package/src/decorators/list/List.ts

@@ -1,6 +1,22 @@
 import 'reflect-metadata';
+import { AnyClass } from '../../types/AnyClass';
 
-const LIST_KEY = 'List';
+const LIST_METADATA_KEY = 'ListMetaData';
+
+export interface GetDataParams {
+  page?: number;
+  limit?: number;
+  filters?: Record<string, any>;
+}
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+export type GetDataForList<T> = (params: GetDataParams) => Promise<PaginatedResponse<T>>;
 
 export interface ListHeaderOptions {
   title?: string;
@@ -10,23 +26,31 @@ export interface ListHeaderOptions {
 export interface ListCellOptions<T> {
   details?: { path: string; label: string };
   edit?: { path: string; label: string };
-  delete?: { label: string };
+  delete?: { label: string; onRemoveItem?: (item: T) => Promise<void> };
 }
 
 export interface ListOptions<T> {
+  getData: GetDataForList<T>;
   headers?: ListHeaderOptions;
   cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
 }
 
+export interface ListConfiguration<T> extends ListOptions<T> {}
+
 export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
   return (target: Function) => {
     if (options) {
-      Reflect.defineMetadata(LIST_KEY, options, target);
+      Reflect.defineMetadata(LIST_METADATA_KEY, options, target);
     }
   };
 }
 
-export function getClassListData<T>(entityClass: T): ListOptions<T> | undefined {
-  //TODO: try to remove any
-  return Reflect.getMetadata(LIST_KEY, entityClass as any);
+export function getListConfiguration<T extends AnyClass>(entityClass: T): ListConfiguration<T> {
+  const listConfiguration = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
+  if (!listConfiguration) {
+    throw new Error('List decerator should be used on class');
+  }
+  return {
+    ...listConfiguration,
+  };
 }

package/src/decorators/list/cells/ImageCell.ts

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

package/src/decorators/list/getListPageMeta.ts

@@ -0,0 +1,16 @@
+import { AnyClass } from '../../types/AnyClass';
+import { getDetailsItemFields } from '../details/DetailsItem';
+import { CellConfiguration, getCellFields } from './Cell';
+import { getListConfiguration, ListConfiguration } from './List';
+
+export interface ListPageMeta<T extends AnyClass> {
+  class: ListConfiguration<T>;
+  cells: CellConfiguration[];
+}
+
+export function getListPageMeta<T extends AnyClass>(entityClass: T): ListPageMeta<T> {
+  return {
+    class: getListConfiguration(entityClass),
+    cells: getCellFields<T>(entityClass),
+  };
+}

package/src/index.ts

@@ -1,28 +1,36 @@
-export type { OnSubmitFN, GetDetailsDataFN } from './components/pages/FormPage';
-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 type {
-  GetDataForList,
-  PaginatedResponse,
-  GetDataParams,
-} from './components/components/list/ListPage';
+//DETAILS
+export { DetailsPage } from './components/DetailsPage';
+export { Details, type GetDetailsDataFN } from './decorators/details/Details';
+export { DetailsItem } from './decorators/details/DetailsItem';
 
-export { ListPage } from './components/components/list/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';
+//LIST
+export { ListPage } from './components/list/ListPage';
+export {
+  List,
+  type GetDataForList,
+  type PaginatedResponse,
+  type GetDataParams,
+} from './decorators/list/List';
+export { ImageCell } from './decorators/list/cells/ImageCell';
 export { Cell } from './decorators/list/Cell';
+
+//FORM
+export { FormPage } from './components/form/FormPage';
+export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
-// Export page components
-export { getFormFields } from './decorators/form/getFormFields';
+//for nested form fields
 export { getInputFields } from './decorators/form/Input';
+
+//PANEL
+export { Panel } from './components/Panel';
+
+//DASHBOARD
+export { Counter } from './components/Counter';
+
+//LAYOUT
+export { Layout } from './components/layout';
+
+//AUTH
+export { Login } from './components/Login';
+
+//UTILS

package/src/initPanel.ts

@@ -1,6 +1,3 @@
 import { InitPanelOptions } from './types/initPanelOptions';
-import { useAppStore } from './store/store';
 
-export function initPanel({ screenPaths }: InitPanelOptions) {
-  useAppStore.setState({ screenPaths });
-}
+export function initPanel({}: InitPanelOptions) {}

package/src/store/store.ts

@@ -1,7 +1,6 @@
 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;
@@ -9,16 +8,12 @@ interface User {
 
 interface AppState {
   user: User | null;
-  screens: Record<string, ScreenCreatorData> | null;
-  screenPaths: Record<string, string>;
 }
 
 export const useAppStore = createWithEqualityFn<AppState>()(
   persist(
     _ => ({
-      screens: null,
       user: null,
-      screenPaths: {},
     }),
     {
       name: 'app-store-1',