proje-react-panel 1.0.14 → 1.0.15

package/.cursor/rules.md

@@ -0,0 +1,122 @@
+# React Component Development Rules
+
+## 1. Component Declaration Style
+
+Always use regular function declarations for React components instead of arrow functions or React.FC.
+
+### ✅ Correct Way:
+
+```typescript
+interface ButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+export function Button({ label, onClick }: ButtonProps) {
+  return <button onClick={onClick}>{label}</button>;
+}
+```
+
+### ❌ 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:
+
+- 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
+
+### Performance Best Practices
+
+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
+
+## 4. Benefits of This Approach
+
+- 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
+
+## 5. When to Break the Rules
+
+These rules can be broken in specific cases:
+
+- When working with legacy code that uses different patterns
+- When team consensus prefers a different approach
+- When specific project requirements dictate otherwise
+
+## 6. Additional Guidelines
+
+- Keep components focused and single-responsibility
+- Use meaningful prop and interface names
+- Document complex props with comments
+- Export components as named exports
+- Use TypeScript's strict mode

package/.cursor/settings.json

@@ -0,0 +1,57 @@
+{
+  "prompts": {
+    "default": {
+      "system": "You are a powerful agentic AI coding assistant powered by Claude 3.5 Sonnet. You operate exclusively in Cursor, the world's best IDE.",
+      "user": "Please help me with my coding task. I need assistance with:",
+      "assistant": "I'll help you with your coding task. Let me analyze the requirements and provide a solution."
+    },
+    "code_review": {
+      "system": "You are an expert code reviewer focusing on best practices, security, and performance.",
+      "user": "Please review this code and provide feedback on:",
+      "assistant": "I'll review the code and provide detailed feedback on the specified aspects."
+    },
+    "debugging": {
+      "system": "You are a debugging expert specializing in identifying and fixing code issues.",
+      "user": "I'm encountering this error/problem:",
+      "assistant": "Let me help you debug this issue. First, I'll analyze the error and then propose solutions."
+    },
+    "refactoring": {
+      "system": "You are a code refactoring expert focusing on improving code quality and maintainability.",
+      "user": "Please help me refactor this code to:",
+      "assistant": "I'll help you refactor the code according to your requirements while maintaining functionality."
+    },
+    "documentation": {
+      "system": "You are a technical documentation expert specializing in clear and comprehensive documentation.",
+      "user": "Please help me document this code/feature:",
+      "assistant": "I'll help you create clear and comprehensive documentation for your code/feature."
+    }
+  },
+  "editor": {
+    "formatOnSave": true,
+    "tabSize": 2,
+    "insertSpaces": true,
+    "rulers": [80, 100],
+    "wordWrap": "off"
+  },
+  "terminal": {
+    "defaultProfile": "zsh",
+    "fontSize": 14
+  },
+  "git": {
+    "enableSmartCommit": true,
+    "autofetch": true
+  },
+  "files": {
+    "exclude": {
+      "**/.git": true,
+      "**/.svn": true,
+      "**/.hg": true,
+      "**/CVS": true,
+      "**/.DS_Store": true,
+      "**/Thumbs.db": true,
+      "**/node_modules": true,
+      "**/dist": true,
+      "**/build": true
+    }
+  }
+} 

package/.eslintrc.js

@@ -3,6 +3,11 @@ module.exports = {
 	extends: ["eslint:recommended", "plugin:react/recommended"],
 	parser: "@typescript-eslint/parser",
 	plugins: ["@typescript-eslint"],
+	settings: {
+		react: {
+			version: "detect"
+		}
+	},
 	overrides: [
 		{
 			files: ["*.ts", "*.tsx"],

package/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": ["react", "react-hooks"],
+  "rules": {
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "function-declaration",
+        "unnamedComponents": "function-declaration"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "react/prefer-stateless-function": "error",
+    "react/no-this-in-sfc": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+} 

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+} 

package/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Build Project",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["build"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.fontSize": 13,
+  "workbench.fontAliasing": "antialiased",
+  "chat.editor.fontSize": 15,
+  "debug.console.fontSize": 15,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

package/PTD.md

@@ -0,0 +1,234 @@
+# Project Technical Documentation (PTD)
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── pages/
+│   │   ├── ListPage.tsx
+│   │   ├── FormPage.tsx
+│   │   └── Login.tsx
+│   ├── layout/
+│   │   └── Layout.tsx
+│   ├── components/
+│   │   └── Counter.tsx
+│   └── Panel.tsx
+├── decorators/
+│   ├── list/
+│   │   ├── List.ts
+│   │   ├── ImageCell.ts
+│   │   └── Cell.ts
+│   ├── form/
+│   │   └── Input.ts
+│   └── Crud.ts
+├── types/
+│   ├── initPanelOptions.ts
+│   └── ScreenCreatorData.ts
+└── index.ts
+```
+
+## Core Components
+
+### Panel Component
+The main entry point of the library that initializes and manages the panel system.
+
+```typescript
+interface InitPanelOptions {
+  // Panel initialization options
+  // Add specific options here
+}
+```
+
+### Page Components
+
+#### ListPage
+- Purpose: Displays data in a tabular format
+- Features:
+  - Customizable columns
+  - Sorting and filtering
+  - Pagination
+  - Image cell support
+
+#### FormPage
+- Purpose: Handles data input and editing
+- Features:
+  - Dynamic form generation
+  - Validation
+  - File upload support
+  - Custom field types
+
+#### Login
+- Purpose: Authentication interface
+- Features:
+  - User authentication
+  - Session management
+  - Security handling
+
+## Decorators
+
+### List Decorators
+
+#### @List
+```typescript
+@List(options: ListOptions)
+class YourListClass {
+  // List implementation
+}
+```
+
+#### @ImageCell
+```typescript
+@ImageCell(options: ImageCellOptions)
+property: string;
+```
+
+#### @Cell
+```typescript
+@Cell(options: CellOptions)
+property: any;
+```
+
+### Form Decorators
+
+#### @Input
+```typescript
+@Input(options: InputOptions)
+property: string;
+```
+
+#### @Crud
+```typescript
+@Crud(options: CrudOptions)
+class YourCrudClass {
+  // CRUD implementation
+}
+```
+
+## Type Definitions
+
+### InitPanelOptions
+```typescript
+interface InitPanelOptions {
+  // Add specific options
+}
+```
+
+### ScreenCreatorData
+```typescript
+interface ScreenCreatorData {
+  // Add specific data structure
+}
+```
+
+## Technical Implementation Details
+
+### State Management
+- Uses React's built-in state management
+- Supports external state management libraries
+- Implements context for global state
+
+### Data Flow
+1. Panel initialization
+2. Component mounting
+3. Data fetching
+4. State updates
+5. UI rendering
+
+### Performance Considerations
+- Lazy loading for large lists
+- Image optimization
+- Caching strategies
+- Memory management
+
+### Security
+- Input sanitization
+- XSS prevention
+- CSRF protection
+- Authentication flow
+
+## Development Guidelines
+
+### Code Style
+- Follow TypeScript best practices
+- Use functional components with hooks
+- Implement proper error handling
+- Write unit tests for components
+
+### Testing
+- Unit tests for components
+- Integration tests for decorators
+- E2E tests for critical flows
+- Performance testing
+
+### Documentation
+- JSDoc comments for components
+- Type definitions
+- Usage examples
+- API documentation
+
+## Build and Deployment
+
+### Development
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+### Production Build
+```bash
+npm run build
+# or
+yarn build
+```
+
+### Testing
+```bash
+npm run test
+# or
+yarn test
+```
+
+## Dependencies
+
+### Core Dependencies
+- React
+- TypeScript
+- Other essential libraries
+
+### Development Dependencies
+- Testing frameworks
+- Build tools
+- Linting tools
+
+## Version Control
+
+### Branch Strategy
+- main: Production-ready code
+- develop: Development branch
+- feature/*: New features
+- bugfix/*: Bug fixes
+
+### Commit Convention
+- feat: New features
+- fix: Bug fixes
+- docs: Documentation
+- style: Code style
+- refactor: Code refactoring
+- test: Testing
+- chore: Maintenance
+
+## Troubleshooting
+
+### Common Issues
+1. List rendering performance
+2. Form validation errors
+3. Image loading issues
+4. Authentication problems
+
+### Solutions
+- Performance optimization techniques
+- Debugging strategies
+- Error handling best practices
+- Logging and monitoring 

package/README.md

@@ -1,32 +1,66 @@
-#  React Panel
+# React Panel Library
 
-## Overview
-React Panel is a web application built using as the backend framework and React for the frontend. It features a customizable sidebar and supports CRUD operations on entities. This project is designed to be a foundational template for building admin panels or other web-based interfaces.
+A powerful and flexible React-based panel library for building administrative interfaces and data management systems.
 
----
 ## Features
-- **Entity CRUD Operations**: Easily create, read, update, and delete entities through the panel.
-- **Sidebar Navigation**: The application includes a sidebar for easy navigation, which is fully customizable.
-- **Single Design Template**: Comes with a default design that can be customized to fit your needs.
-- **NestJS Integration**: It's designed especially for NestJS applications.
-- **Class-validator Support**: If you work with class-validator, you can easily copy-paste entity definitions to create tables and forms based on your entities.
----
-
-## Getting Started
-### Installation
-1. Install dependencies:
-   ```bash
-   yarn add
-   ```
-
-### TypeScript Configuration
-Add these options to your `tsconfig.json` file:
-```json
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "strictPropertyInitialization": false
-    // other compiler options...
-  }
-}
+
+- **List Page Component**: Built-in list view with customizable cells and image handling
+- **Form Page Component**: Flexible form creation and management
+- **Login Component**: Authentication handling
+- **Layout System**: Consistent layout management
+- **Panel Component**: Core panel functionality
+- **Counter Component**: Utility component for counting operations
+
+## Decorators
+
+The library provides several decorators for enhanced functionality:
+
+### List Decorators
+- `@List`: Main list decorator for creating list views
+- `@ImageCell`: Specialized cell for handling images in lists
+- `@Cell`: Base cell decorator for list items
+
+### Form Decorators
+- `@Input`: Form input decorator
+- `@Crud`: CRUD operations decorator
+
+## Installation
+
+```bash
+npm install proje-react-panel
+# or
+yarn add proje-react-panel
 ```
+
+## Usage
+
+```typescript
+import { Panel, ListPage, FormPage, Login, Layout } from 'proje-react-panel';
+
+// Initialize the panel
+const panel = new Panel({
+  // configuration options
+});
+
+// Use components
+<Layout>
+  <ListPage />
+  <FormPage />
+  <Login />
+</Layout>
+```
+
+## Type Definitions
+
+The library includes TypeScript definitions for better development experience:
+
+- `InitPanelOptions`: Configuration options for panel initialization
+- `ScreenCreatorData`: Data structure for screen creation
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

package/dist/api/CrudApi.d.ts

@@ -0,0 +1,12 @@
+interface FetchOptions {
+    token: string;
+    baseUrl: string;
+}
+export declare const CrudApi: {
+    getList: (options: FetchOptions, api: string) => Promise<any>;
+    create: (options: FetchOptions, api: string, data: any) => Promise<any>;
+    details: (options: FetchOptions, api: string, id: any) => Promise<any>;
+    edit: (options: FetchOptions, api: string, data: any) => Promise<any>;
+    delete: (options: FetchOptions, api: string, id: string) => Promise<any>;
+};
+export {};

package/dist/components/Panel.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { InitPanelOptions } from "../types/initPanelOptions";
+import React from 'react';
+import { InitPanelOptions } from '../types/initPanelOptions';
 type AppProps = {
     children: React.ReactNode;
     init: () => InitPanelOptions;

package/dist/components/components/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+}
+export declare function Checkbox({ id, ...props }: CheckboxProps): React.JSX.Element;
+export {};

package/dist/components/components/Counter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface CounterProps {
+    image: React.ReactNode;
+    text: string;
+    targetNumber: number;
+    duration?: number;
+}
+export declare function Counter({ image, text, targetNumber, duration }: CounterProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { InputOptions } from '../../decorators/form/Input';
+import { UseFormRegister } from 'react-hook-form';
+interface FormFieldProps {
+    input: InputOptions;
+    register: UseFormRegister<any>;
+    error?: {
+        message?: string;
+    };
+}
+export declare function FormField({ input, register, error }: FormFieldProps): React.JSX.Element;
+export {};

package/dist/components/components/ImageUploader.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface MultipleImageUploaderProps {
+    value?: Array<{
+        file: File;
+        image: string;
+        remove?: boolean;
+    }>;
+    onError?: (error: string | null) => void;
+    onClear?: () => void;
+    reset?: any;
+    onFilesChange?: (files: File[]) => void;
+}
+export declare function ImageUploader(): React.JSX.Element;
+export declare function MultipleImageUploader(props: MultipleImageUploaderProps): React.JSX.Element;
+export {};

package/dist/components/components/InnerForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FormOptions } from '../../decorators/form/FormOptions';
+import { AnyClass } from '../../types/AnyClass';
+import { OnSubmitFN, GetDetailsDataFN } from '../pages/FormPage';
+interface InnerFormProps<T extends AnyClass> {
+    formOptions: FormOptions;
+    onSubmit: OnSubmitFN<T>;
+    redirect?: string;
+    getDetailsData?: GetDetailsDataFN<T>;
+}
+export declare function InnerForm<T extends AnyClass>({ formOptions, onSubmit, redirect, getDetailsData, }: InnerFormProps<T>): React.JSX.Element;
+export {};

package/dist/components/components/LoadingScreen.d.ts

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

package/dist/components/components/index.d.ts

@@ -0,0 +1,8 @@
+export { InnerForm } from './InnerForm';
+export { FormField } from './FormField';
+export { LoadingScreen } from './LoadingScreen';
+export { Counter } from './Counter';
+export { ImageUploader } from './ImageUploader';
+export { ErrorComponent } from './ErrorComponent';
+export { Label } from './Label';
+export { ErrorBoundary } from './ErrorBoundary';