proje-react-panel 1.6.0 → 1.8.0

package/.cursor/rules.md

@@ -40,7 +40,17 @@ export function Button({ label, onClick }: ButtonProps) {
 
 Use SCSS exclusively for styling.
 
-## 5. General Rules
+## 5. Package Management
+
+**ALWAYS use yarn, NEVER use npm.**
+
+- Use `yarn add` instead of `npm install`
+- Use `yarn remove` instead of `npm uninstall`
+- Use `yarn` instead of `npm install` for installing dependencies
+- Use `yarn build` instead of `npm run build`
+- Use `yarn test` instead of `npm test`
+
+## 6. General Rules
 
 - Keep components focused and single-responsibility
 - Use meaningful names

package/.vscode/settings.json

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

package/README.md

@@ -10,18 +10,24 @@ A powerful and flexible React-based panel library for building administrative in
 - **Layout System**: Consistent layout management
 - **Panel Component**: Core panel functionality
 - **Counter Component**: Utility component for counting operations
+- **Dashboard Components**: Flexible grid-based dashboard layout system
+- **Color System**: Centralized color system with SCSS variables and CSS custom properties
 
 ## 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
+- `@SelectInput`: Select input decorator
+- `@CustomInput`: Render your own component in place of a field
 - `@Crud`: CRUD operations decorator
 
 ## Installation
@@ -35,7 +41,7 @@ yarn add proje-react-panel
 ## Usage
 
 ```typescript
-import { Panel, ListPage, FormPage, Login, Layout } from 'proje-react-panel';
+import { Panel, ListPage, FormPage, Login, Layout, DashboardGrid, DashboardItem } from 'proje-react-panel';
 
 // Initialize the panel
 const panel = new Panel({
@@ -48,8 +54,58 @@ const panel = new Panel({
   <FormPage />
   <Login />
 </Layout>
+
+// Dashboard example
+<DashboardGrid columns={3}>
+  <DashboardItem>Content 1</DashboardItem>
+  <DashboardItem>Content 2</DashboardItem>
+  <DashboardItem>Content 3</DashboardItem>
+</DashboardGrid>
+```
+
+## Custom Form Fields
+
+When a field needs a control the library does not ship, `@CustomInput` lets your app render
+it. The library only wires the field into `react-hook-form` and renders the label and the
+error message like any other field — everything inside is yours.
+
+```tsx
+import { CustomInput, type CustomRenderProps } from 'proje-react-panel';
+
+class Product {
+  @Input({ label: 'Name' })
+  name: string;
+
+  @CustomInput({
+    label: 'Cover image',
+    render: ({ value, onChange, error }: CustomRenderProps) => (
+      <MyImagePicker value={value as string} onSelect={onChange} invalid={!!error} />
+    ),
+  })
+  coverImage: string;
+}
 ```
 
+The render function receives:
+
+| Prop        | Type                       | Description                                         |
+| ----------- | -------------------------- | --------------------------------------------------- |
+| `fieldName` | `string`                   | Full form path of the field (nested paths included) |
+| `value`     | `unknown`                  | Current form value                                  |
+| `onChange`  | `(value: unknown) => void` | Writes a new value into the form                    |
+| `error`     | `string \| undefined`      | Validation message for this field, if any           |
+
+Because the value is whatever you pass to `onChange`, a custom field can hold an id, an
+object or a file reference — validation and submit treat it like any other form value.
+
+## Guides
+
+- **[Dashboard Guide](./guides/DASHBOARD_GUIDE.md)** - Complete guide for using Dashboard components
+- **[Auth Layout Guide](./guides/AUTH_LAYOUT_GUIDE.md)** - Guide for implementing authentication layouts with sidebar
+- **[Auth Layout Example](./guides/AUTH_LAYOUT_EXAMPLE.md)** - Complete working example of AuthLayout implementation
+- **[Color System Guide](./guides/COLOR_SYSTEM_GUIDE.md)** - Complete documentation of the color system, SCSS variables, and CSS custom properties
+- **[Implementation Guide](./guides/IMPLEMENTATION_GUIDE.md)** - Comprehensive guide for implementing the library in your React applications
+
 ## Type Definitions
 
 The library includes TypeScript definitions for better development experience:

package/dist/__tests__/components/form/CustomField.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @jest-environment jsdom
+ */
+import 'reflect-metadata';

package/dist/api/ApiConfig.d.ts

@@ -0,0 +1,11 @@
+import { AxiosInstance } from 'axios';
+declare let axiosInstance: AxiosInstance;
+export interface ApiConfig {
+    baseUrl: string;
+}
+export declare function initApi(config: ApiConfig): void;
+export declare function initAuthToken(): void;
+export declare function setAuthToken(token: string): void;
+export declare function setAuthLogout(): void;
+export declare function getAxiosInstance(): AxiosInstance;
+export { axiosInstance };

package/dist/api/AuthApi.d.ts

@@ -1,5 +1,2 @@
-export declare const AuthApi: {
-    login: (fetchSettings: {
-        baseUrl: string;
-    }, username: string, password: string) => Promise<any>;
-};
+import { LoginForm, LoginResponse } from '../types/Login';
+export declare function login<T>(data: LoginForm | FormData): Promise<LoginResponse<T>>;

package/dist/api/CrudApi.d.ts

@@ -1,12 +1,11 @@
-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 {};
+import { GetDataForList } from '../decorators/list/List';
+import { OnSubmitFN } from '../decorators/form/Form';
+import { GetDetailsDataFN } from '../decorators/details/Details';
+export declare function getAll<T>(endpoint: string): GetDataForList<T>;
+export declare function getOne<T>(endpoint: string, key?: string): GetDetailsDataFN<T>;
+export declare function create<T>(endpoint: string): OnSubmitFN<T>;
+export declare function createFormData<T>(endpoint: string): OnSubmitFN<T>;
+export declare function update<T>(endpoint: string, key?: string): OnSubmitFN<T>;
+export declare function updateFormData<T>(endpoint: string, key?: string): OnSubmitFN<T>;
+export declare function updateSimple<T>(endpoint: string): OnSubmitFN<T>;
+export declare function remove<T>(endpoint: string, key?: string): (data: T) => Promise<void>;

package/dist/components/DashboardContainer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DashboardContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare function DashboardContainer({ children, className }: DashboardContainerProps): React.JSX.Element;
+export {};

package/dist/components/DashboardGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DashboardGridProps {
+    children: React.ReactNode;
+    columns?: number;
+    gap?: string;
+    className?: string;
+}
+export declare function DashboardGrid({ children, columns, gap, className, }: DashboardGridProps): React.JSX.Element;
+export {};

package/dist/components/DashboardItem.d.ts

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

package/dist/components/ThemeSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ThemeSwitcherProps {
+    variant?: 'button' | 'dropdown';
+    className?: string;
+}
+export declare function ThemeSwitcher({ variant, className }: ThemeSwitcherProps): React.JSX.Element;
+export {};

package/dist/components/dashboard/Dashboard.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DashboardProps {
+    children: React.ReactNode;
+    columns?: number;
+}
+export declare function Dashboard({ children, columns }: DashboardProps): React.JSX.Element;
+export {};

package/dist/components/dashboard/DashboardGrid.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DashboardGridProps {
+    children: React.ReactNode;
+    columns?: number;
+}
+export declare function DashboardGrid({ children, columns }: DashboardGridProps): React.JSX.Element;
+export {};

package/dist/components/dashboard/DashboardItem.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DashboardItemProps {
+    children: React.ReactNode;
+}
+export declare function DashboardItem({ children }: DashboardItemProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,3 @@
+export { Dashboard } from './Dashboard';
+export { DashboardGrid } from './DashboardGrid';
+export { DashboardItem } from './DashboardItem';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
+interface CustomFieldProps {
+    input: InputConfiguration;
+    fieldName: string;
+    error?: string;
+}
+export declare function CustomField({ input, fieldName, error }: CustomFieldProps): React.JSX.Element;
+export {};

package/dist/decorators/auth/DefaultLoginForm.d.ts

@@ -0,0 +1,4 @@
+export declare class DefaultLoginForm {
+    username: string;
+    password: string;
+}

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

@@ -1,7 +1,7 @@
 import 'reflect-metadata';
 import { AnyClass, AnyClassConstructor } from '../../types/AnyClass';
 export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hidden' | 'nested';
-export type ExtendedInputTypes = InputTypes | 'select';
+export type ExtendedInputTypes = InputTypes | 'select' | 'custom';
 export interface InputOptions {
     type?: InputTypes;
     inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';

package/dist/decorators/form/inputs/CustomInput.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import { InputConfiguration, InputOptions } from '../Input';
+export interface CustomRenderProps {
+    fieldName: string;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    error?: string;
+}
+export interface CustomInputOptions extends Omit<InputOptions, 'type'> {
+    render: (props: CustomRenderProps) => ReactNode;
+}
+export interface CustomInputConfiguration extends InputConfiguration {
+    type: 'custom';
+    render: (props: CustomRenderProps) => ReactNode;
+}
+export declare function CustomInput(options: CustomInputOptions): PropertyDecorator;