proje-react-panel 1.6.0 → 1.7.0

package/README.md

@@ -10,17 +10,21 @@ 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
 - `@Crud`: CRUD operations decorator
 
@@ -35,7 +39,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 +52,21 @@ 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>
 ```
 
+## Guides
+
+- **[Dashboard Guide](./DASHBOARD_GUIDE.md)** - Complete guide for using Dashboard components
+- **[Auth Layout Guide](./AUTH_LAYOUT_GUIDE.md)** - Guide for implementing authentication layouts with sidebar
+- **[Color System Guide](./COLOR_SYSTEM_GUIDE.md)** - Complete documentation of the color system, SCSS variables, and CSS custom properties
+
 ## Type Definitions
 
 The library includes TypeScript definitions for better development experience:

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/decorators/auth/DefaultLoginForm.d.ts

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