proje-react-panel 1.1.4 → 1.1.6

package/src/components/form/Select.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { InputConfiguration } from '../../decorators/form/Input';
-import { useFormContext, Controller, useWatch } from 'react-hook-form';
+import { useFormContext, Controller } from 'react-hook-form';
 import { SelectInputConfiguration } from '../../decorators/form/inputs/SelectInput';
-import ReactSelect, { SingleValue } from 'react-select';
+import ReactSelect from 'react-select';
 import { darkSelectStyles } from './SelectStyles';
 
 interface SelectProps {
@@ -10,24 +10,24 @@ interface SelectProps {
   fieldName: string;
 }
 
-interface OptionType {
+interface OptionType<TValue> {
   label: string;
-  value: string;
+  value: TValue;
 }
 
-export function Select({ input, fieldName }: SelectProps) {
-  const inputSelect = input as SelectInputConfiguration;
+export function Select<TValue>({ input, fieldName }: SelectProps) {
+  const inputSelect = input as SelectInputConfiguration<TValue>;
   const { control } = useFormContext();
-  const [options, setOptions] = useState<OptionType[]>(inputSelect.defaultOptions || []);
-  const [key, setKey] = useState(0);
+  const [options, setOptions] = useState<OptionType<TValue>[]>(inputSelect.defaultOptions || []);
+  //NOTE: is added to component to fix type error. Need to find a better solution.
+  const styles = useMemo(() => darkSelectStyles<TValue>(), []);
   useEffect(() => {
     if (inputSelect.onSelectPreloader) {
       inputSelect.onSelectPreloader().then(option => {
         setOptions(option);
-        setKey(key + 1);
       });
     }
-  }, [input]);
+  }, [inputSelect, inputSelect.onSelectPreloader]);
 
   return (
     <Controller
@@ -36,12 +36,11 @@ export function Select({ input, fieldName }: SelectProps) {
       render={({ field }) => {
         return (
           <ReactSelect
-            key={key}
             options={options}
-            styles={darkSelectStyles}
+            styles={styles}
             value={options.find(option => option.value === field.value) || null}
-            onChange={(selectedOption: OptionType | null) => {
-              field.onChange(selectedOption?.value);
+            onChange={(selectedOption: OptionType<TValue> | null) => {
+              field.onChange(selectedOption?.value as TValue);
             }}
           />
         );

package/src/components/form/SelectStyles.ts

@@ -1,11 +1,11 @@
 import { StylesConfig } from 'react-select';
 
-interface OptionType {
+interface OptionType<TValue> {
   label: string;
-  value: string;
+  value: TValue;
 }
 
-export const darkSelectStyles: StylesConfig<OptionType, false> = {
+export const darkSelectStyles = <TValue>(): StylesConfig<OptionType<TValue>, false> => ({
   control: (baseStyles, state) => ({
     ...baseStyles,
     backgroundColor: '#1f2937',
@@ -70,4 +70,4 @@ export const darkSelectStyles: StylesConfig<OptionType, false> = {
       color: '#6366f1',
     },
   }),
-};
+});

package/src/components/layout/Layout.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { SideBar } from './SideBar';
 import { useAppStore } from '../../store/store';
-import { useNavigate } from 'react-router';
 
 export function Layout<IconType>({
   children,
@@ -17,18 +16,13 @@ export function Layout<IconType>({
   const { user } = useAppStore(s => ({
     user: s.user,
   }));
-  const navigate = useNavigate();
   if (!user) {
     logout?.('redirect');
   }
 
   return (
     <div className="layout">
-      <SideBar
-        onLogout={logout}
-        menu={menu}
-        getIcons={getIcons}
-      />
+      <SideBar onLogout={logout} menu={menu} getIcons={getIcons} />
       <main className="content">{children}</main>
     </div>
   );

package/src/components/layout/SideBar.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Link, useLocation, useNavigate } from 'react-router';
+import { Link, useLocation } from 'react-router';
 
 type GetMenuFunction<IconType> = () => { name: string; path: string; iconType: IconType }[];
 
@@ -16,7 +16,6 @@ export function SideBar<IconType>({
 }) {
   const [isOpen, setIsOpen] = useState(true);
   const location = useLocation();
-  const navigate = useNavigate();
 
   // Helper function to determine if a link is active
   const isActiveLink = (path: string) => {

package/src/components/list/CellField.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ImageCellOptions } from '../../decorators/list/cells/ImageCell';
 import { AnyClass } from '../../types/AnyClass';
-import { CellConfiguration, ExtendedCellTypes } from '../../decorators/list/Cell';
+import { CellConfiguration } from '../../decorators/list/Cell';
 import { BooleanCell } from './cells/BooleanCell';
 import { DateCell } from './cells/DateCell';
 import { ImageCell } from './cells/ImageCell';
@@ -11,13 +10,11 @@ import { DownloadCell } from './cells/DownloadCell';
 
 interface CellFieldProps<T extends AnyClass> {
   configuration: CellConfiguration;
-  item: T;
-  value: any;
+  value: T[keyof T];
 }
 
 export function CellField<T extends AnyClass>({
   configuration,
-  item,
   value,
 }: CellFieldProps<T>): React.ReactElement {
   let render;

package/src/components/list/Datagrid.tsx

@@ -58,7 +58,6 @@ export function Datagrid<T extends AnyClass>({
                       <CellField
                         key={configuration.name}
                         configuration={configuration}
-                        item={item}
                         value={value}
                       />
                     );

package/src/components/list/EmptyList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const EmptyList: React.FC = () => {
+export function EmptyList() {
   return (
     <div className="empty-list">
       <div className="empty-list-content">
@@ -23,4 +23,4 @@ export const EmptyList: React.FC = () => {
       </div>
     </div>
   );
-};
+}

package/src/components/list/FilterPopup.tsx

@@ -134,6 +134,8 @@ export function FilterPopup<T extends AnyClass>({
   listPageMeta,
   activeFilters,
 }: FilterPopupProps<T>): React.ReactElement | null {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [filters, setFilters] = React.useState<Record<string, any>>(activeFilters ?? {});
   const popupRef = useRef<HTMLDivElement>(null);
   const fields = useMemo(
@@ -158,8 +160,8 @@ export function FilterPopup<T extends AnyClass>({
   }, [isOpen, onClose]);
 
   if (!isOpen) return null;
-
-  const handleFilterChange = (fieldName: string, value: any) => {
+  
+  const handleFilterChange = (fieldName: string, value: string) => {
     setFilters(prev => ({
       ...prev,
       [fieldName]: value,

package/src/components/list/ListPage.tsx

@@ -20,7 +20,7 @@ export function ListPage<T extends AnyClass>({
   const listPageMeta = useMemo(() => getListPageMeta(model), [model]);
 
   const [loading, setLoading] = useState(true);
-  const [data, setData] = useState<any>(null);
+  const [data, setData] = useState<T[]>([]);
   const [error, setError] = useState<unknown>(null);
 
   const [pagination, setPagination] = useState({ total: 0, page: 0, limit: 0 });
@@ -37,7 +37,9 @@ export function ListPage<T extends AnyClass>({
           page,
           filters: filters ?? activeFilters ?? {},
         });
-        setData(result.data);
+        //TODO: any is not a good solution, we need to find a better way to do this
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setData(result.data as any);
         setPagination({
           total: result.total,
           page: result.page,
@@ -50,7 +52,7 @@ export function ListPage<T extends AnyClass>({
         setLoading(false);
       }
     },
-    [activeFilters, listPageMeta.class.getData]
+    [activeFilters, listPageMeta.class]
   );
 
   useEffect(() => {
@@ -60,7 +62,7 @@ export function ListPage<T extends AnyClass>({
       filtersFromUrl[key] = value;
     });
     setActiveFilters(filtersFromUrl);
-  }, [location.search]);
+  }, []);
 
   useEffect(() => {
     if (activeFilters) {
@@ -68,7 +70,7 @@ export function ListPage<T extends AnyClass>({
     }
   }, [fetchData, params.page, activeFilters, listPageMeta.class.getData]);
 
-  const handleFilterApply = (filters: Record<string, any>) => {
+  const handleFilterApply = (filters: Record<string, string>) => {
     setActiveFilters(filters);
 
     // Convert filters to URLSearchParams

package/src/components/list/cells/DefaultCell.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface DefaultCellProps {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   value: any;
   configuration: CellConfiguration;
 }

package/src/decorators/details/Details.ts

@@ -8,10 +8,10 @@ interface DetailsOptions<T extends AnyClass> {
   getDetailsData: GetDetailsDataFN<T>;
 }
 
-export interface DetailsConfiguration<T extends AnyClass> extends DetailsOptions<T> {}
+export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T>;
 
 export function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
     }

package/src/decorators/details/DetailsItem.ts

@@ -26,6 +26,8 @@ export function DetailsItem(options?: DetailsItemOptions): PropertyDecorator {
 export function getDetailsItemFields<T extends AnyClass>(
   entityClass: T
 ): DetailsItemConfiguration[] {
+  //TODO: any is not a good solution, we need to find a better way to do this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const prototype = (entityClass as any).prototype;
   const inputFields: string[] = Reflect.getMetadata(DETAILS_ITEM_KEY, prototype) || [];
 

package/src/decorators/form/Form.ts

@@ -1,7 +1,6 @@
 import 'reflect-metadata';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { GetDetailsDataFN } from '../details/Details';
-import { InputConfiguration } from './Input';
 
 const DETAILS_METADATA_KEY = 'DetailsMetaData';
 export type OnSubmitFN<T> = (data: T | FormData) => Promise<T>;
@@ -9,21 +8,19 @@ export type OnSubmitFN<T> = (data: T | FormData) => Promise<T>;
 interface FormOptions<T extends AnyClass> {
   onSubmit: OnSubmitFN<T>;
   getDetailsData?: GetDetailsDataFN<T>;
-  /** @deprecated */
-  redirectBackOnSuccess?: boolean;
   type?: 'json' | 'formData';
   redirectSuccessUrl?: string;
 }
 
-export interface FormConfiguration<T extends AnyClass> extends FormOptions<T> {
-  /** @deprecated */
-  redirectBackOnSuccess: boolean;
+export interface FormConfiguration<T extends AnyClass> {
+  onSubmit: OnSubmitFN<T>;
+  getDetailsData?: GetDetailsDataFN<T>;
   type: 'json' | 'formData';
   redirectSuccessUrl?: string;
 }
 
 export function Form<T extends AnyClass>(options?: FormOptions<T>): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(DETAILS_METADATA_KEY, options, target);
     }
@@ -35,14 +32,16 @@ export function getFormConfiguration<T extends AnyClass, K extends AnyClassConst
 ): FormConfiguration<T> {
   const formOptions: FormOptions<T> = Reflect.getMetadata(
     DETAILS_METADATA_KEY,
-    entityClass as Object
+    entityClass as object
   );
   if (!formOptions) {
     throw new Error('Form decerator should be used on class');
   }
-  return {
-    ...formOptions,
+  const formConfiguration: FormConfiguration<T> = {
+    onSubmit: formOptions.onSubmit,
+    getDetailsData: formOptions.getDetailsData,
     type: formOptions.type ?? 'json',
-    redirectBackOnSuccess: formOptions.redirectBackOnSuccess ?? true,
+    redirectSuccessUrl: formOptions.redirectSuccessUrl,
   };
+  return formConfiguration;
 }

package/src/decorators/form/Input.ts

@@ -11,21 +11,29 @@ export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hi
 export type ExtendedInputTypes = InputTypes | 'select';
 
 export interface InputOptions {
+  name?: string;
   type?: InputTypes;
   inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
-  name?: string;
   label?: string;
   placeholder?: string;
   nestedFields?: InputConfiguration[];
+  includeInCSV?: boolean;
+  includeInJSON?: boolean;
 }
 
 export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
   type: ExtendedInputTypes;
 }
 
-export interface InputConfiguration extends Omit<InputOptions, 'type'> {
+export interface InputConfiguration {
   name: string;
   type: ExtendedInputTypes;
+  inputType: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
+  label?: string;
+  placeholder?: string;
+  nestedFields?: InputConfiguration[];
+  includeInCSV: boolean;
+  includeInJSON: boolean;
 }
 
 export function Input(options?: InputOptions): PropertyDecorator {
@@ -44,9 +52,8 @@ export function ExtendedInput(options?: ExtendedInputOptions): 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`;
+        const keyString = `${INPUT_KEY.toString()}:${propertyKey.toString()}:options`;
       Reflect.defineMetadata(keyString, options, target);
     }
   };
@@ -55,21 +62,23 @@ export function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator
 export function getInputFields<T extends AnyClass>(
   entityClass: AnyClassConstructor<T>
 ): InputConfiguration[] {
-  const prototype = (entityClass as any).prototype;
+  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 fields: InputOptions =
+      Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};
     const inputType = fields?.inputType ?? (isFieldSensitive(field) ? 'password' : 'text');
-    return {
+    const inputConfiguration: InputConfiguration = {
       ...fields,
-      editable: fields.editable ?? true,
-      sensitive: fields.sensitive,
       name: fields?.name ?? field,
       label: fields?.label ?? field,
       placeholder: fields?.placeholder ?? field,
       inputType: inputType,
+      nestedFields: fields?.nestedFields ?? [],
       type: fields?.type ?? 'input',
-      selectOptions: fields?.selectOptions ?? [],
+      includeInCSV: fields?.includeInCSV ?? false,
+      includeInJSON: fields?.includeInJSON ?? false,
     };
+    return inputConfiguration;
   });
 }

package/src/decorators/form/inputs/SelectInput.ts

@@ -1,17 +1,18 @@
 import { ExtendedInput, ExtendedInputOptions, InputConfiguration, InputOptions } from '../Input';
 
-export interface SelectInputOptions extends InputOptions {
-  onSelectPreloader?: () => Promise<{ label: string; value: any }[]>;
-  defaultOptions?: { value: any; label: string }[];
+export interface SelectInputOptions<T> extends InputOptions {
+  onSelectPreloader?: () => Promise<{ label: string; value: T }[]>;
+  defaultOptions?: { value: T; label: string }[];
+  csvExport?: never;
 }
 
-export interface SelectInputConfiguration extends InputConfiguration {
+export interface SelectInputConfiguration<T> extends InputConfiguration {
   type: 'select';
-  onSelectPreloader?: () => Promise<{ label: string; value: string }[]>;
-  defaultOptions?: { value: any; label: string }[];
+  onSelectPreloader?: () => Promise<{ label: string; value: T }[]>;
+  defaultOptions?: { value: T; label: string }[];
 }
 
-export function SelectInput(options?: SelectInputOptions): PropertyDecorator {
+export function SelectInput<K>(options?: SelectInputOptions<K>): PropertyDecorator {
   return ExtendedInput({
     ...options,
     type: 'select',

package/src/decorators/list/Cell.ts

@@ -1,8 +1,8 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
-export const CELL_KEY: Symbol = Symbol('cell');
+export const CELL_KEY = Symbol('cell');
 
 interface Filter {
   type: 'string' | 'number' | 'date' | 'static-select';
@@ -42,8 +42,10 @@ export function Cell(options?: CellOptions): PropertyDecorator {
   return createDecorator(CELL_KEY, options, cellMap);
 }
 
-export function getCellFields<T extends AnyClass>(entityClass: T): CellConfiguration[] {
-  const prototype = (entityClass as any).prototype;
+export function getCellFields<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): CellConfiguration[] {
+  const prototype = entityClass.prototype;
   const inputFields: string[] = Reflect.getMetadata(CELL_KEY, prototype) || [];
 
   return inputFields.map(field => {

package/src/decorators/list/ExtendedCell.ts

@@ -1,12 +1,4 @@
-import {
-  CELL_KEY,
-  CellConfiguration,
-  CellOptions,
-  CellTypes,
-  Cell,
-  ExtendedCellTypes,
-  cellMap,
-} from './Cell';
+import { CELL_KEY, CellConfiguration, CellOptions, ExtendedCellTypes, cellMap } from './Cell';
 import { createDecorator, DecoratorMap } from '../../utils/decerators';
 
 export interface ExtendedCellOptions extends Omit<CellOptions, 'type'> {

package/src/decorators/list/List.ts

@@ -1,11 +1,13 @@
 import 'reflect-metadata';
-import { AnyClass } from '../../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 
 const LIST_METADATA_KEY = 'ListMetaData';
 
 export interface GetDataParams {
   page?: number;
   limit?: number;
+  //TODO: fix this
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   filters?: Record<string, any>;
 }
 
@@ -35,17 +37,19 @@ export interface ListOptions<T> {
   cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
 }
 
-export interface ListConfiguration<T> extends ListOptions<T> {}
+export type ListConfiguration<T> = ListOptions<T>;
 
 export function List<T>(options?: ListOptions<T> | ((item: T) => ListOptions<T>)): ClassDecorator {
-  return (target: Function) => {
+  return (target: object) => {
     if (options) {
       Reflect.defineMetadata(LIST_METADATA_KEY, options, target);
     }
   };
 }
 
-export function getListConfiguration<T extends AnyClass>(entityClass: T): ListConfiguration<T> {
+export function getListConfiguration<T extends AnyClass>(
+  entityClass: AnyClassConstructor<T>
+): ListConfiguration<T> {
   const listConfiguration = Reflect.getMetadata(LIST_METADATA_KEY, entityClass);
   if (!listConfiguration) {
     throw new Error('List decerator should be used on class');

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

@@ -1,5 +1,5 @@
 import { CellConfiguration, CellOptions } from '../Cell';
-import { ExtendedCell, ExtendedCellOptions } from '../ExtendedCell';
+import { ExtendedCell } from '../ExtendedCell';
 
 export interface ImageCellOptions extends Omit<CellOptions, 'type'> {
   baseUrl: string;

package/src/decorators/list/getListPageMeta.ts

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

package/src/store/store.ts

@@ -8,12 +8,14 @@ interface User {
 
 interface AppState {
   user: User | null;
+  login: (user: User) => void;
 }
 
 export const useAppStore = createWithEqualityFn<AppState>()(
   persist(
-    _ => ({
+    set => ({
       user: null,
+      login: (user: User) => set({ user }),
     }),
     {
       name: 'app-store-1',

package/src/styles/components/form-header.scss

@@ -0,0 +1,75 @@
+.form-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  background-color: #333333;
+  border-radius: 8px 0 0 8px;
+
+  .form-title {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #cccccc;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    //keep this even its not used in project (it can be used in other projects)
+    .export-button,
+    .import-button {
+      padding: 0.5rem 1rem;
+      border: 1px solid #444444;
+      border-radius: 4px;
+      background-color: #222222;
+      color: #cccccc;
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: #444444;
+        border-color: #555555;
+      }
+    }
+  }
+
+  &.dark-theme {
+    background-color: black;
+    box-shadow: none;
+
+    .form-title {
+      color: white;
+    }
+
+    .form-actions {
+      .export-button {
+        background-color: black;
+        border-color: black;
+        color: white;
+
+        &:hover {
+          background-color: black;
+          border-color: black;
+        }
+      }
+
+      .import-button {
+        .import-label {
+          background-color: black;
+          border-color: black;
+          color: white;
+
+          &:hover {
+            background-color: black;
+            border-color: black;
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/index.scss

@@ -10,6 +10,7 @@
 @import './filter-popup';
 @import './components/uploader.scss';
 @import './components/checkbox';
+@import './components/form-header';
 @import './details';
 
 //TODO: import deprecated

package/src/types/AnyClass.ts

@@ -1,2 +1,5 @@
+//TODO: any?
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyClass = Record<string, any>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AnyClassConstructor<T extends AnyClass> = new (...args: any[]) => T;

package/src/utils/decerators.ts

@@ -1,9 +1,10 @@
 export type DecoratorMap<T, K> = (
-  { target, propertyKey }: { target: Object; propertyKey: string | symbol },
+  prop: { target: object; propertyKey: string | symbol },
   options: T
 ) => K;
+
 export function createDecorator<T extends { name?: string }, K>(
-  key: Symbol,
+  key: symbol,
   options?: T,
   map?: DecoratorMap<T, K>
 ): PropertyDecorator {