proje-react-panel 1.1.4 → 1.1.6

package/.cursor/rules.md

@@ -1,10 +1,8 @@
 # React Component Development Rules
 
-## 1. Component Declaration Style
+## 1. Component Structure
 
-Always use regular function declarations for React components instead of arrow functions or React.FC.
-
-### ✅ Correct Way:
+Use regular function declarations for components:
 
 ```typescript
 interface ButtonProps {
@@ -17,106 +15,34 @@ export function Button({ label, onClick }: ButtonProps) {
 }
 ```
 
-### ❌ Incorrect Ways:
-
-```typescript
-// Don't use React.FC
-export const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
-  return <button onClick={onClick}>{label}</button>;
-};
-
-// Don't use arrow functions
-export const Button = ({ label, onClick }: ButtonProps) => {
-  return <button onClick={onClick}>{label}</button>;
-};
-```
-
-## 2. Props Typing
-
-- Type props directly in the function parameters
-- Use interfaces for complex prop types
-- Keep prop interfaces close to the component
-
-### ✅ Good Example:
-
-```typescript
-interface UserCardProps {
-  user: {
-    name: string;
-    email: string;
-    avatar?: string;
-  };
-  onSelect: (userId: string) => void;
-}
-
-export function UserCard({ user, onSelect }: UserCardProps) {
-  return (
-    <div onClick={() => onSelect(user.id)}>
-      <img src={user.avatar} alt={user.name} />
-      <h3>{user.name}</h3>
-      <p>{user.email}</p>
-    </div>
-  );
-}
-```
-
-## 3. Performance Optimization Guidelines
-
-### Performance Optimization Hooks Usage
-
-#### React.memo
-
-⚠️ **Warning**: Only use `React.memo` when you have identified a specific performance issue through profiling. Common use cases:
-
-- Components that render frequently with the same props
-- Components that are expensive to render
-- Components that are rendered in lists with many items
-
-#### useCallback
-
-⚠️ **Warning**: Only use `useCallback` when:
-
-- You're passing callbacks to optimized child components that rely on reference equality
-- You have identified a specific performance issue through profiling
-- The callback is used as a dependency in other hooks
-
-#### useMemo
-
-⚠️ **Warning**: Only use `useMemo` when:
+## 2. Props and Types
 
-- You have expensive computations that you want to cache
-- You need referential equality for dependencies in other hooks
-- You have identified a specific performance issue through profiling
+- Type props directly in function parameters
+- Use interfaces for complex props
+- Keep interfaces close to components
 
-### Performance Best Practices
+## 3. Performance Guidelines
 
-1. Always start with functional components
-2. Use named exports instead of default exports
-3. Profile your application before adding performance optimizations
-4. Document why you're using performance optimization hooks when you do use them
-5. Consider using the React DevTools Profiler to identify actual performance bottlenecks
+### Only use these when necessary:
 
-## 4. Benefits of This Approach
+- `React.memo`: For frequently rendered components with same props
+- `useCallback`: For callbacks passed to optimized child components
+- `useMemo`: For expensive computations or referential equality needs
 
-- Better TypeScript inference
-- Cleaner and more readable code
-- Easier to maintain and refactor
-- Follows modern React best practices
-- Reduces unnecessary type complexity
-- Better IDE support and autocompletion
+### Best Practices:
 
-## 5. When to Break the Rules
+1. Start with functional components
+2. Use named exports
+3. Profile before optimizing
+4. Document optimization reasons
 
-These rules can be broken in specific cases:
+## 4. Styling
 
-- When working with legacy code that uses different patterns
-- When team consensus prefers a different approach
-- When specific project requirements dictate otherwise
+Use SCSS exclusively for styling.
 
-## 6. Additional Guidelines
+## 5. General Rules
 
 - Keep components focused and single-responsibility
-- Use meaningful prop and interface names
-- Document complex props with comments
-- Export components as named exports
+- Use meaningful names
+- Document complex props
 - Use TypeScript's strict mode

package/.vscode/settings.json

@@ -4,5 +4,10 @@
   "chat.editor.fontSize": 15,
   "debug.console.fontSize": 15,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "folder-customization.folders": [
+    {
+      "path": "test-aletleri/src/client/"
+    }
+  ]
 }

package/PTD.md

@@ -1,36 +1,52 @@
 # Project Technical Documentation (PTD)
 
+> **AI-Generated Content Notice**: This documentation has been automatically generated by artificial intelligence and has not been manually reviewed or verified by human experts. While efforts have been made to ensure accuracy, users should exercise discretion and verify critical information independently. The content may not reflect the most current state of the project and should be used as a reference guide only.
+
 ## Project Structure
 
 ```
 src/
-├── components/
-│   ├── pages/
+├── api/                    # API integration and services
+├── assets/                 # Static assets (images, fonts, etc.)
+├── components/             # React components
+│   ├── pages/             # Page components
 │   │   ├── ListPage.tsx
 │   │   ├── FormPage.tsx
+│   │   ├── DetailsPage.tsx
 │   │   └── Login.tsx
-│   ├── layout/
+│   ├── layout/            # Layout components
 │   │   └── Layout.tsx
-│   ├── components/
-│   │   └── Counter.tsx
-│   └── Panel.tsx
-├── decorators/
-│   ├── list/
+│   ├── Counter.tsx        # Dashboard component
+│   └── Panel.tsx          # Main panel component
+├── decorators/            # TypeScript decorators
+│   ├── list/             # List-related decorators
 │   │   ├── List.ts
-│   │   ├── ImageCell.ts
+│   │   ├── cells/
+│   │   │   ├── ImageCell.ts
+│   │   │   └── DownloadCell.ts
 │   │   └── Cell.ts
-│   ├── form/
-│   │   └── Input.ts
-│   └── Crud.ts
-├── types/
+│   ├── form/             # Form-related decorators
+│   │   ├── Form.ts
+│   │   ├── Input.ts
+│   │   └── inputs/
+│   │       └── SelectInput.ts
+│   └── details/          # Details-related decorators
+│       ├── Details.ts
+│       └── DetailsItem.ts
+├── hooks/                # Custom React hooks
+├── store/                # State management
+├── styles/               # Global styles and themes
+├── types/                # TypeScript type definitions
 │   ├── initPanelOptions.ts
 │   └── ScreenCreatorData.ts
-└── index.ts
+├── utils/                # Utility functions
+└── index.ts              # Main entry point and exports
 ```
 
 ## Core Components
 
 ### Panel Component
+
 The main entry point of the library that initializes and manages the panel system.
 
 ```typescript
@@ -43,22 +59,35 @@ interface InitPanelOptions {
 ### Page Components
 
 #### ListPage
+
 - Purpose: Displays data in a tabular format
 - Features:
   - Customizable columns
   - Sorting and filtering
   - Pagination
-  - Image cell support
+  - Image and Download cell support
+  - Type-safe data handling
 
 #### FormPage
+
 - Purpose: Handles data input and editing
 - Features:
   - Dynamic form generation
   - Validation
   - File upload support
-  - Custom field types
+  - Custom field types (Input, Select)
+  - Nested form fields support
+
+#### DetailsPage
+
+- Purpose: Displays detailed information about a single item
+- Features:
+  - Customizable layout
+  - Dynamic content rendering
+  - Nested details support
 
 #### Login
+
 - Purpose: Authentication interface
 - Features:
   - User authentication
@@ -70,6 +99,7 @@ interface InitPanelOptions {
 ### List Decorators
 
 #### @List
+
 ```typescript
 @List(options: ListOptions)
 class YourListClass {
@@ -78,12 +108,21 @@ class YourListClass {
 ```
 
 #### @ImageCell
+
 ```typescript
 @ImageCell(options: ImageCellOptions)
 property: string;
 ```
 
+#### @DownloadCell
+
+```typescript
+@DownloadCell(options: DownloadCellOptions)
+property: string;
+```
+
 #### @Cell
+
 ```typescript
 @Cell(options: CellOptions)
 property: any;
@@ -91,23 +130,51 @@ property: any;
 
 ### Form Decorators
 
+#### @Form
+
+```typescript
+@Form(options: FormOptions)
+class YourFormClass {
+  // Form implementation
+}
+```
+
 #### @Input
+
 ```typescript
 @Input(options: InputOptions)
 property: string;
 ```
 
-#### @Crud
+#### @SelectInput
+
+```typescript
+@SelectInput(options: SelectInputOptions)
+property: string;
+```
+
+### Details Decorators
+
+#### @Details
+
 ```typescript
-@Crud(options: CrudOptions)
-class YourCrudClass {
-  // CRUD implementation
+@Details(options: DetailsOptions)
+class YourDetailsClass {
+  // Details implementation
 }
 ```
 
+#### @DetailsItem
+
+```typescript
+@DetailsItem(options: DetailsItemOptions)
+property: any;
+```
+
 ## Type Definitions
 
 ### InitPanelOptions
+
 ```typescript
 interface InitPanelOptions {
   // Add specific options
@@ -115,6 +182,7 @@ interface InitPanelOptions {
 ```
 
 ### ScreenCreatorData
+
 ```typescript
 interface ScreenCreatorData {
   // Add specific data structure
@@ -124,52 +192,73 @@ interface ScreenCreatorData {
 ## Technical Implementation Details
 
 ### State Management
+
 - Uses React's built-in state management
 - Supports external state management libraries
 - Implements context for global state
+- Store directory for centralized state management
 
 ### Data Flow
+
 1. Panel initialization
 2. Component mounting
-3. Data fetching
+3. Data fetching (via API services)
 4. State updates
 5. UI rendering
 
+### API Integration
+
+- Centralized API services
+- Type-safe API calls
+- Error handling
+- Request/Response interceptors
+
 ### Performance Considerations
+
 - Lazy loading for large lists
 - Image optimization
 - Caching strategies
 - Memory management
+- Code splitting
 
 ### Security
+
 - Input sanitization
 - XSS prevention
 - CSRF protection
 - Authentication flow
+- Secure API communication
 
 ## Development Guidelines
 
 ### Code Style
+
 - Follow TypeScript best practices
 - Use functional components with hooks
 - Implement proper error handling
 - Write unit tests for components
+- Follow consistent naming conventions
 
 ### Testing
+
 - Unit tests for components
 - Integration tests for decorators
 - E2E tests for critical flows
 - Performance testing
+- API integration testing
 
 ### Documentation
+
 - JSDoc comments for components
 - Type definitions
 - Usage examples
 - API documentation
+- Component documentation
 
 ## Build and Deployment
 
 ### Development
+
 ```bash
 npm run dev
 # or
@@ -177,6 +266,7 @@ yarn dev
 ```
 
 ### Production Build
+
 ```bash
 npm run build
 # or
@@ -184,6 +274,7 @@ yarn build
 ```
 
 ### Testing
+
 ```bash
 npm run test
 # or
@@ -193,24 +284,29 @@ yarn test
 ## Dependencies
 
 ### Core Dependencies
+
 - React
 - TypeScript
 - Other essential libraries
 
 ### Development Dependencies
+
 - Testing frameworks
 - Build tools
 - Linting tools
+- Type checking tools
 
 ## Version Control
 
 ### Branch Strategy
+
 - main: Production-ready code
 - develop: Development branch
-- feature/*: New features
-- bugfix/*: Bug fixes
+- feature/\*: New features
+- bugfix/\*: Bug fixes
 
 ### Commit Convention
+
 - feat: New features
 - fix: Bug fixes
 - docs: Documentation
@@ -222,13 +318,17 @@ yarn test
 ## Troubleshooting
 
 ### Common Issues
+
 1. List rendering performance
 2. Form validation errors
 3. Image loading issues
 4. Authentication problems
+5. API integration issues
 
 ### Solutions
+
 - Performance optimization techniques
 - Debugging strategies
 - Error handling best practices
-- Logging and monitoring 
+- Logging and monitoring
+- API error handling

package/dist/components/DetailsPage.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { AnyClass } from '../types/AnyClass';
+import { AnyClass, AnyClassConstructor } from '../types/AnyClass';
 interface DetailsPageProps<T extends AnyClass> {
-    model: new (...args: any[]) => T;
+    model: AnyClassConstructor<T>;
 }
 export declare function DetailsPage<T extends AnyClass>({ model }: DetailsPageProps<T>): React.JSX.Element;
 export {};

package/dist/components/Login.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-export type OnLogin = {
+export interface OnLogin {
     login: (username: string, password: string) => Promise<LoginResponse>;
-};
+}
 interface LoginResponse {
     user: any;
     token: string;

package/dist/components/Panel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-type AppProps = {
+interface AppProps {
     children: React.ReactNode;
-};
+}
 export declare function Panel({ children }: AppProps): React.JSX.Element;
 export {};

package/dist/components/form/FormField.d.ts

@@ -8,10 +8,6 @@ interface FormFieldProps {
         message?: string;
     };
     baseName?: string;
-    onSelectPreloader?: (inputOptions: InputConfiguration) => Promise<{
-        label: string;
-        value: string;
-    }[]>;
 }
-export declare function FormField({ input, register, error, baseName, onSelectPreloader }: FormFieldProps): React.JSX.Element;
+export declare function FormField({ input, register, error, baseName }: FormFieldProps): React.JSX.Element;
 export {};

package/dist/components/form/FormHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AnyClass } from '../../types/AnyClass';
+import { FormUtils } from './FormPage';
+interface FormHeaderProps<T extends AnyClass> {
+    title?: string;
+    header?: (utils: FormUtils<T>) => React.ReactNode;
+    utils: FormUtils<T>;
+}
+export declare function FormHeader<T extends AnyClass>({ utils, header, title }: FormHeaderProps<T>): React.JSX.Element;
+export {};

package/dist/components/form/FormPage.d.ts

@@ -1,6 +1,17 @@
 import React from 'react';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
+export interface FormUtils<T extends AnyClass> {
+    getValues: () => T;
+    setValues: (values: Partial<T>) => void;
+    toJSON: (values: Partial<T>) => string;
+    fromJSON: (json: string) => Partial<T>;
+    export: (data: string, extension: 'txt' | 'json' | 'csv') => void;
+    import: () => Promise<string>;
+}
 export interface FormPageProps<T extends AnyClass> {
     model: AnyClassConstructor<T>;
+    title?: string;
+    documentTitle?: string;
+    header?: (utils: FormUtils<T>) => React.ReactNode;
 }
-export declare function FormPage<T extends AnyClass>({ model }: FormPageProps<T>): React.JSX.Element;
+export declare function FormPage<T extends AnyClass>({ model, title, documentTitle, header, }: FormPageProps<T>): React.JSX.Element;

package/dist/components/form/Select.d.ts

@@ -4,5 +4,5 @@ interface SelectProps {
     input: InputConfiguration;
     fieldName: string;
 }
-export declare function Select({ input, fieldName }: SelectProps): React.JSX.Element;
+export declare function Select<TValue>({ input, fieldName }: SelectProps): React.JSX.Element;
 export {};

package/dist/components/form/SelectStyles.d.ts

@@ -1,7 +1,7 @@
 import { StylesConfig } from 'react-select';
-interface OptionType {
+interface OptionType<TValue> {
     label: string;
-    value: string;
+    value: TValue;
 }
-export declare const darkSelectStyles: StylesConfig<OptionType, false>;
+export declare const darkSelectStyles: <TValue>() => StylesConfig<OptionType<TValue>, false>;
 export {};

package/dist/components/list/CellField.d.ts

@@ -3,8 +3,7 @@ import { AnyClass } from '../../types/AnyClass';
 import { CellConfiguration } from '../../decorators/list/Cell';
 interface CellFieldProps<T extends AnyClass> {
     configuration: CellConfiguration;
-    item: T;
-    value: any;
+    value: T[keyof T];
 }
-export declare function CellField<T extends AnyClass>({ configuration, item, value, }: CellFieldProps<T>): React.ReactElement;
+export declare function CellField<T extends AnyClass>({ configuration, value, }: CellFieldProps<T>): React.ReactElement;
 export {};

package/dist/components/list/EmptyList.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const EmptyList: React.FC;
+export declare function EmptyList(): React.JSX.Element;

package/dist/decorators/details/Details.d.ts

@@ -4,8 +4,7 @@ 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 type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T>;
 export declare function Details<T extends AnyClass>(options?: DetailsOptions<T>): ClassDecorator;
 export declare function getDetailsConfiguration<T extends AnyClass>(entityClass: T): DetailsConfiguration<T>;
 export {};

package/dist/decorators/form/Form.d.ts

@@ -5,14 +5,12 @@ 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;
 }

package/dist/decorators/form/Input.d.ts

@@ -3,19 +3,27 @@ import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
 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 declare function Input(options?: InputOptions): PropertyDecorator;
 export declare function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator;