proje-react-panel 1.6.0 → 1.7.0

package/dist/store/themeStore.d.ts

@@ -0,0 +1,23 @@
+export type ThemeMode = 'light' | 'dark' | 'automatic';
+interface ThemeState {
+    theme: ThemeMode;
+    resolvedTheme: 'light' | 'dark';
+    setTheme: (theme: ThemeMode) => void;
+    initializeTheme: () => void;
+}
+export declare const useThemeStore: import("zustand/traditional").UseBoundStoreWithEqualityFn<Omit<import("zustand/vanilla").StoreApi<ThemeState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeState) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
+    };
+}>;
+export declare const getTheme: () => ThemeMode;
+export declare const getResolvedTheme: () => "light" | "dark";
+export declare const setTheme: (theme: ThemeMode) => void;
+export declare const initializeTheme: () => void;
+export {};

package/dist/types/Login.d.ts

@@ -0,0 +1,8 @@
+export interface LoginResponse<T> {
+    access_token: string;
+    admin: T;
+}
+export interface LoginForm {
+    username: string;
+    password: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "proje-react-panel",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "type": "module",
   "description": "",
   "author": "SEFA DEMİR",
@@ -33,6 +33,7 @@
     "@types/react": "^19.0.10",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.29.1",
+    "axios": "^1.12.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.1",
     "eslint": "^9.24.0",
@@ -61,6 +62,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
+    "axios": ">=1.0.0",
     "react": ">=19.0.0",
     "react-hook-form": ">=7.54.2",
     "react-router": "7.3.0",

package/src/api/ApiConfig.ts

@@ -0,0 +1,63 @@
+import axios, { AxiosInstance } from 'axios';
+
+let axiosInstance: AxiosInstance;
+
+export interface ApiConfig {
+  baseUrl: string;
+}
+
+export function initApi(config: ApiConfig): void {
+  axiosInstance = axios.create({
+    baseURL: config.baseUrl,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  axiosInstance.interceptors.response.use(
+    response => response,
+    error => {
+      if (error.response && error.response.status === 401) {
+        setAuthLogout();
+        window.location.href = '/login';
+      }
+      return Promise.reject(error);
+    }
+  );
+}
+
+export function initAuthToken(): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  const token = localStorage.getItem('token');
+  if (token) {
+    axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+  }
+}
+
+export function setAuthToken(token: string): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+  localStorage.setItem('token', token);
+}
+
+export function setAuthLogout(): void {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  axiosInstance.defaults.headers.common['Authorization'] = null;
+  localStorage.removeItem('token');
+}
+
+export function getAxiosInstance(): AxiosInstance {
+  if (!axiosInstance) {
+    throw new Error('API not initialized. Call initApi first.');
+  }
+  return axiosInstance;
+}
+
+// Export the axios instance for external use
+export { axiosInstance };

package/src/api/AuthApi.ts

@@ -0,0 +1,8 @@
+import { LoginForm, LoginResponse } from '../types/Login';
+import { getAxiosInstance } from './ApiConfig';
+
+export async function login<T>(data: LoginForm | FormData): Promise<LoginResponse<T>> {
+  const axiosInstance = getAxiosInstance();
+  const response = await axiosInstance.post<LoginResponse<T>>('/auth/login', data);
+  return response.data;
+}

package/src/api/CrudApi.ts

@@ -1,65 +1,101 @@
-interface FetchOptions {
-  token: string;
-  baseUrl: string;
-}
+import { GetDataForList, PaginatedResponse, GetDataParams } from '../decorators/list/List';
+import { OnSubmitFN } from '../decorators/form/Form';
+import { GetDetailsDataFN } from '../decorators/details/Details';
+import { getAxiosInstance } from './ApiConfig';
+import { AxiosError } from 'axios';
 
-export const CrudApi = {
-  getList: (options: FetchOptions, api: string) => {
-    return fetch(`${options.baseUrl}/${api}`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      if (res.ok) {
-        return res.json();
-      }
-      throw res;
+export function getAll<T>(endpoint: string): GetDataForList<T> {
+  return async (params: GetDataParams): Promise<PaginatedResponse<T>> => {
+    const axiosInstance = getAxiosInstance();
+    const { page = 1, limit = 10 } = params;
+    const response = await axiosInstance.get<{
+      data: T[];
+      total: number;
+    }>(`/${endpoint}`, {
+      params: { page, limit, ...(params.filters ?? {}) },
     });
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  create: (options: FetchOptions, api: string, data: any) => {
-    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-    // Don't set Content-Type for FormData
-    if (!(data instanceof FormData)) {
-      headers['Content-Type'] = 'application/json';
-    }
+    return {
+      data: response.data.data,
+      total: response.data.total,
+      page,
+      limit,
+    };
+  };
+}
+
+export function getOne<T>(endpoint: string, key = 'id'): GetDetailsDataFN<T> {
+  return async (params: Record<string, string>): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.get<T>(`/${endpoint}/${params[key]}`);
+    return response.data;
+  };
+}
 
-    return fetch(`${options?.baseUrl ?? ''}/${api}`, {
-      method: 'POST',
-      headers,
-      body: data instanceof FormData ? data : JSON.stringify(data),
-    }).then(res => res.json());
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  details: (options: FetchOptions, api: string, id: any) => {
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
-      method: 'GET',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      return res.json();
+export function create<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.post<T>(`/${endpoint}`, data);
+    return response.data;
+  };
+}
+
+export function createFormData<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.post<T>(`/${endpoint}`, data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     });
-  },
-  //TODO: fix this
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  edit: (options: FetchOptions, api: string, data: any) => {
-    const headers: HeadersInit = { Authorization: `Bearer ${options.token}` };
-    // Don't set Content-Type for FormData
-    if (!(data instanceof FormData)) {
-      headers['Content-Type'] = 'application/json';
-    }
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${data.id}`, {
-      method: 'PUT',
-      headers,
-      body: data instanceof FormData ? data : JSON.stringify(data),
-    }).then(res => res.json());
-  },
-  delete: (options: FetchOptions, api: string, id: string) => {
-    return fetch(`${options?.baseUrl ?? ''}/${api}/${id}`, {
-      method: 'DELETE',
-      headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${options.token}` },
-    }).then(res => {
-      return res.clone().json();
+    return response.data;
+  };
+}
+
+export function update<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const id = (data as any)[key];
+    const response = await axiosInstance.put<T>(`/${endpoint}/${id}`, data);
+    return response.data;
+  };
+}
+
+export function updateFormData<T>(endpoint: string, key = 'id'): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const id = (data as any)[key];
+    const response = await axiosInstance.put<T>(`/${endpoint}/${id}`, data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
     });
-  },
-};
+    return response.data;
+  };
+}
+
+export function updateSimple<T>(endpoint: string): OnSubmitFN<T> {
+  return async (data: T | FormData): Promise<T> => {
+    const axiosInstance = getAxiosInstance();
+    const response = await axiosInstance.put<T>(`/${endpoint}`, data);
+    return response.data;
+  };
+}
+
+export function remove<T>(endpoint: string, key = 'id'): (data: T) => Promise<void> {
+  return async (data: T): Promise<void> => {
+    const axiosInstance = getAxiosInstance();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const id = (data as any)[key];
+    await axiosInstance
+      .delete<T>(`/${endpoint}/${id}`)
+      .then((res: any) => res.data)
+      .catch((err: AxiosError) => {
+        const messageError = err.response?.data as { message: string };
+        if (messageError?.message) {
+          throw new Error(messageError.message);
+        }
+        throw err;
+      });
+  };
+}

package/src/components/dashboard/Dashboard.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DashboardGrid } from './DashboardGrid';
+
+interface DashboardProps {
+  children: React.ReactNode;
+  columns?: number;
+}
+
+export function Dashboard({ children, columns }: DashboardProps) {
+  return <DashboardGrid columns={columns}>{children}</DashboardGrid>;
+}

package/src/components/dashboard/DashboardGrid.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+interface DashboardGridProps {
+  children: React.ReactNode;
+  columns?: number;
+}
+
+export function DashboardGrid({ children, columns = 3 }: DashboardGridProps) {
+  return (
+    <div className="dashboard-grid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+      {children}
+    </div>
+  );
+}

package/src/components/dashboard/DashboardItem.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface DashboardItemProps {
+  children: React.ReactNode;
+}
+
+export function DashboardItem({ children }: DashboardItemProps) {
+  return <div className="dashboard-item">{children}</div>;
+}

package/src/components/dashboard/index.ts

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

package/src/decorators/auth/DefaultLoginForm.ts

@@ -0,0 +1,32 @@
+import { MinLength } from 'class-validator';
+import { Form } from '../form/Form';
+import { Input } from '../form/Input';
+import { LoginForm as LoginFormInterface, LoginResponse } from '../../types/Login';
+import { setAuthToken } from '../../api/ApiConfig';
+import { login } from '../../utils/login';
+import { User } from '../../types/User';
+import { authLogin } from '../..';
+
+@Form<LoginFormInterface, LoginResponse<User>>({
+  onSubmit: authLogin,
+  onSubmitSuccess: (data: LoginResponse<User>) => {
+    setAuthToken(data.access_token);
+    login(data.admin as User, data.access_token, () => {
+      window.location.href = '/';
+    });
+  },
+  type: 'formData',
+})
+export class DefaultLoginForm {
+  @MinLength(3)
+  @Input({
+    label: 'Username',
+  })
+  username: string;
+
+  @Input({
+    label: 'Password',
+    inputType: 'password',
+  })
+  password: string;
+}

package/src/index.ts

@@ -29,6 +29,7 @@ export { Panel } from './components/Panel';
 
 //DASHBOARD
 export { Counter } from './components/Counter';
+export { Dashboard, DashboardGrid, DashboardItem } from './components/dashboard';
 
 //LAYOUT
 export { Layout } from './components/layout';
@@ -37,6 +38,31 @@ export { Layout } from './components/layout';
 export { Login } from './components/Login';
 export { login } from './utils/login';
 export { logout } from './utils/logout';
+export { DefaultLoginForm } from './decorators/auth/DefaultLoginForm';
+
+//API
+export {
+  initApi,
+  initAuthToken,
+  setAuthToken,
+  setAuthLogout,
+  getAxiosInstance,
+  axiosInstance,
+} from './api/ApiConfig';
+export {
+  getAll,
+  getOne,
+  create,
+  createFormData,
+  update,
+  updateFormData,
+  updateSimple,
+  remove,
+} from './api/CrudApi';
+export { login as authLogin } from './api/AuthApi';
+
+//TYPES
+export type { LoginForm, LoginResponse } from './types/Login';
 
 //SERVICES
 export { updateDetailsData } from './services/DataService';

package/src/styles/base/_variables.scss

@@ -0,0 +1,45 @@
+// SCSS Color Variables - Dark Theme
+// ⚠️ IMPORTANT: If you change any variables here, you MUST update COLOR_SYSTEM_GUIDE.md
+$dark-void: #1a1a1a; // Darkest background
+$dark-slate: #2b2b2b; // Dark background
+$dark-mist: #333333; // Medium dark background
+$dark-silver: #444444; // Lighter dark background
+
+$dark-pearl: #ffffff; // White
+$dark-ash: #e0e0e0; // Light gray
+$dark-dust: #999999; // Medium gray
+
+$dark-ocean: #007bff; // Primary blue
+$dark-sky: #66b2ff; // Light blue (focus)
+$dark-emerald: #4caf50; // Success green
+$dark-ruby: #ff4d4f; // Error red
+
+.layout {
+  // Backgrounds
+  --prp-bg-primary: #{$dark-void};
+  --prp-bg-secondary: #{$dark-slate};
+  --prp-bg-tertiary: #{$dark-mist};
+  --prp-bg-white: #{$dark-pearl};
+  --prp-bg-button-primary: #{$dark-ocean};
+  --prp-bg-button-success: #{$dark-emerald};
+
+  // Text
+  --prp-text-primary: #{$dark-pearl};
+  --prp-text-secondary: #{$dark-ash};
+  --prp-text-muted: #{$dark-dust};
+
+  // Borders
+  --prp-border-primary: #{$dark-silver};
+  --prp-border-light: #{$dark-ash};
+
+  // Colors
+  --prp-color-focus: #{$dark-sky};
+  --prp-color-success: #{$dark-emerald};
+  --prp-color-error: #{$dark-ruby};
+
+  // Shadows
+  --prp-shadow-light: rgba(0, 0, 0, 0.05);
+  --prp-shadow-medium: rgba(0, 0, 0, 0.2);
+  --prp-shadow-dark: rgba(0, 0, 0, 0.3);
+  --prp-shadow-focus: rgba(102, 178, 255, 0.2);
+}

package/src/styles/components/button.scss

@@ -1,9 +1,9 @@
 .panel-button {
   padding: 0.5rem 1rem;
-  border: 1px solid #444444;
+  border: 1px solid var(--prp-border-primary);
   border-radius: 4px;
-  background-color: cornflowerblue;
-  color: #ffffff;
+  background-color: var(--prp-bg-button-primary);
+  color: var(--prp-text-primary);
   font-size: 0.875rem;
   font-weight: 500;
   cursor: pointer;

package/src/styles/components/checkbox.scss

@@ -13,10 +13,10 @@ input.apple-switch {
   outline: none;
   width: 50px;
   height: 30px;
-  background-color: #fff;
+  background-color: var(--prp-bg-white);
   border: 1px solid #d9dadc;
   border-radius: 50px;
-  box-shadow: inset -20px 0 0 0 #fff;
+  box-shadow: inset -20px 0 0 0 var(--prp-bg-white);
 }
 
 input.apple-switch:after {
@@ -28,15 +28,15 @@ input.apple-switch:after {
   width: 26px;
   height: 26px;
   border-radius: 50%;
-  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 2px 4px 6px var(--prp-shadow-medium);
 }
 
 input.apple-switch:checked {
-  box-shadow: inset 20px 0 0 0 #4ed164;
-  border-color: #4ed164;
+  box-shadow: inset 20px 0 0 0 var(--prp-color-success);
+  border-color: var(--prp-color-success);
 }
 
 input.apple-switch:checked:after {
   left: 20px;
-  box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: -2px 4px 3px var(--prp-shadow-light);
 }

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

@@ -4,14 +4,14 @@
   align-items: center;
   padding: 1rem;
   margin-bottom: 1.5rem;
-  background-color: #333333;
+  background-color: var(--prp-bg-tertiary);
   border-radius: 8px 0 0 8px;
 
   .form-title {
     margin: 0;
     font-size: 1.5rem;
     font-weight: 600;
-    color: #cccccc;
+    color: var(--prp-text-secondary);
   }
 
   .form-header-inner {
@@ -23,50 +23,52 @@
     .export-button,
     .import-button {
       padding: 0.5rem 1rem;
-      border: 1px solid #444444;
+      border: 1px solid var(--prp-border-primary);
       border-radius: 4px;
-      background-color: #222222;
-      color: #cccccc;
+      background-color: var(--prp-bg-secondary);
+      color: var(--prp-text-secondary);
       font-size: 0.875rem;
       cursor: pointer;
       transition: all 0.2s ease;
 
       &:hover {
-        background-color: #444444;
-        border-color: #555555;
+        background-color: var(--prp-bg-tertiary);
+        border-color: var(--prp-border-primary);
       }
     }
   }
 
   &.dark-theme {
-    background-color: black;
+    background-color: var(--prp-bg-primary);
     box-shadow: none;
 
     .form-title {
-      color: white;
+      color: var(--prp-text-primary);
     }
 
     .form-actions {
       .export-button {
-        background-color: black;
-        border-color: black;
-        color: white;
+        background-color: var(--prp-bg-primary);
+        border-color: var(--prp-bg-primary);
+        color: var(--prp-text-primary);
 
         &:hover {
-          background-color: black;
-          border-color: black;
+          background-color: var(--prp-bg-primary);
+          border-color: var(--prp-bg-primary);
+          opacity: 0.9;
         }
       }
 
       .import-button {
         .import-label {
-          background-color: black;
-          border-color: black;
-          color: white;
+          background-color: var(--prp-bg-primary);
+          border-color: var(--prp-bg-primary);
+          color: var(--prp-text-primary);
 
           &:hover {
-            background-color: black;
-            border-color: black;
+            background-color: var(--prp-bg-primary);
+            border-color: var(--prp-bg-primary);
+            opacity: 0.9;
           }
         }
       }