proje-react-panel 1.6.0 → 1.8.0

package/src/components/dashboard/index.ts

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

package/src/components/form/CustomField.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { InputConfiguration } from '../../decorators/form/Input';
+import { useFormContext, Controller } from 'react-hook-form';
+import { CustomInputConfiguration } from '../../decorators/form/inputs/CustomInput';
+
+interface CustomFieldProps {
+  input: InputConfiguration;
+  fieldName: string;
+  error?: string;
+}
+
+export function CustomField({ input, fieldName, error }: CustomFieldProps) {
+  const inputCustom = input as CustomInputConfiguration;
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={fieldName}
+      control={control}
+      render={({ field }) => {
+        return (
+          <>
+            {inputCustom.render({
+              fieldName,
+              value: field.value,
+              onChange: field.onChange,
+              error,
+            })}
+          </>
+        );
+      }}
+    />
+  );
+}

package/src/components/form/FormField.tsx

@@ -5,6 +5,7 @@ import { Uploader } from './Uploader';
 import { Checkbox } from './Checkbox';
 import { Label } from './Label';
 import { Select } from './Select';
+import { CustomField } from './CustomField';
 
 interface FormFieldProps {
   input: InputConfiguration;
@@ -82,6 +83,8 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
         return <textarea {...register(fieldName)} placeholder={input.placeholder} />;
       case 'select':
         return <Select input={input} fieldName={fieldName} />;
+      case 'custom':
+        return <CustomField input={input} fieldName={fieldName} error={error?.message} />;
       case 'input': {
         return (
           <input type={input.inputType} {...register(fieldName)} placeholder={input.placeholder} />
@@ -98,7 +101,8 @@ export function FormField({ input, register, error, baseName }: FormFieldProps)
       default:
         return null;
     }
-  }, [input, register, fieldName]);
+    // NOTE: error message is a dependency because 'custom' forwards it into the render prop.
+  }, [input, register, fieldName, error?.message]);
 
   return (
     <div className={`form-field ${input.type === 'nested' ? 'nested-form-field' : ''}`}>

package/src/components/layout/Layout.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SideBar } from './SideBar';
+import { LoadingScreen } from '../LoadingScreen';
 import { useAppStore } from '../../store/store';
 
 export function Layout<IconType>({
@@ -16,8 +17,23 @@ export function Layout<IconType>({
   const { user } = useAppStore(s => ({
     user: s.user,
   }));
-  if (!user) {
+  const redirected = useRef(false);
+
+  // Yonlendirme render govdesinde degil effect'te yapiliyor: render sirasindaki
+  // yan etki React kuralini ihlal ediyor ve StrictMode'da iki kez tetikleniyordu.
+  useEffect(() => {
+    if (user || redirected.current) {
+      return;
+    }
+    redirected.current = true;
     logout?.('redirect');
+  }, [user, logout]);
+
+  // Oturum yokken children RENDER EDILMEZ. Eskiden `logout('redirect')` cagrilip
+  // yine de tum layout donuluyordu; tarayici korumali ekrani boyayip ancak
+  // ondan sonra login'e gidiyordu (panelin bir an gorunup kaybolmasi).
+  if (!user) {
+    return <LoadingScreen id="layout-auth-redirect" />;
   }
 
   return (

package/src/components/list/ListPage.tsx

@@ -60,7 +60,7 @@ export function ListPage<T extends AnyClass>({
     const filtersFromUrl: Record<string, string> = {};
     searchParams.forEach((value, key) => {
       filtersFromUrl[key] = value;
-    });
+    }); 
     setActiveFilters(filtersFromUrl);
   }, []);
 

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/decorators/form/Input.ts

@@ -8,7 +8,7 @@ const isFieldSensitive = (fieldName: string): boolean => {
 };
 
 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;

package/src/decorators/form/inputs/CustomInput.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { ExtendedInput, ExtendedInputOptions, 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;
+}
+
+//NOTE: the render function travels through Reflect metadata like any other option value.
+export function CustomInput(options: CustomInputOptions): PropertyDecorator {
+  return ExtendedInput({
+    ...options,
+    type: 'custom',
+  } as ExtendedInputOptions);
+}

package/src/index.ts

@@ -21,6 +21,11 @@ export { FormPage } from './components/form/FormPage';
 export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
+export {
+  CustomInput,
+  type CustomInputOptions,
+  type CustomRenderProps,
+} from './decorators/form/inputs/CustomInput';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 
@@ -29,6 +34,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 +43,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;
           }
         }
       }

package/src/styles/components/uploader.scss

@@ -1,19 +1,20 @@
 .uploader {
   &-container {
     padding: 1.5rem;
-    border: 2px dashed var(--border-color, #e0e0e0);
+    border: 2px dashed var(--prp-border-light);
     border-radius: 8px;
-    background-color: var(--bg-color, #fafafa);
+    background-color: var(--prp-bg-white);
     transition: all 0.3s ease;
 
     &:hover {
-      border-color: var(--primary-color, #2196f3);
-      background-color: var(--bg-hover-color, #f5f5f5);
+      border-color: var(--prp-bg-button-primary);
+      background-color: var(--prp-bg-tertiary);
+      opacity: 0.9;
     }
   }
 
   &-button {
-    background-color: var(--primary-color, #2196f3);
+    background-color: var(--prp-bg-button-primary);
     color: var(--button-text-color, white);
     padding: 0.75rem 1.5rem;
     border: none;
@@ -23,11 +24,13 @@
     transition: background-color 0.3s ease;
 
     &:hover {
-      background-color: var(--primary-hover-color, #1976d2);
+      background-color: var(--prp-bg-button-primary);
+      opacity: 0.9;
     }
 
     &:active {
-      background-color: var(--primary-active-color, #1565c0);
+      background-color: var(--prp-bg-button-primary);
+      opacity: 0.8;
     }
   }
 
@@ -38,49 +41,24 @@
   }
 
   &-file {
-    background-color: var(--file-bg-color, white);
+    background-color: var(--prp-bg-secondary);
     padding: 1rem;
     border-radius: 6px;
-    box-shadow: 0 2px 4px var(--shadow-color, rgba(0, 0, 0, 0.05));
+    box-shadow: 0 2px 4px var(--prp-shadow-light);
     display: grid;
     gap: 0.5rem;
 
     p {
       margin: 0;
-      color: var(--text-color, #424242);
+      color: var(--prp-text-muted);
       font-size: 0.875rem;
 
       &:first-child {
-        color: var(--primary-color, #1976d2);
+        color: var(--prp-bg-button-primary);
         font-weight: 500;
       }
     }
   }
 }
 
-:root {
-  --border-color: #424242;
-  --bg-color: #1e1e1e;
-  --bg-hover-color: #2d2d2d;
-  --primary-color: #64b5f6;
-  --primary-hover-color: #42a5f5;
-  --primary-active-color: #2196f3;
-  --button-text-color: #ffffff;
-  --file-bg-color: #2d2d2d;
-  --shadow-color: rgba(0, 0, 0, 0.2);
-  --text-color: #e0e0e0;
-}
-
-// Dark theme
-[data-theme='dark'] {
-  --border-color: #424242;
-  --bg-color: #1e1e1e;
-  --bg-hover-color: #2d2d2d;
-  --primary-color: #64b5f6;
-  --primary-hover-color: #42a5f5;
-  --primary-active-color: #2196f3;
-  --button-text-color: #ffffff;
-  --file-bg-color: #2d2d2d;
-  --shadow-color: rgba(0, 0, 0, 0.2);
-  --text-color: #e0e0e0;
-}
+// Note: Background colors are now managed in base/_variables.scss

package/src/styles/counter.scss

@@ -1,42 +1,34 @@
-// Variables
-$primary-color: #007bff;
-$text-color: #ffffff;
-$bg-color: #1a1a1a;
-$shadow-color: rgba(0, 0, 0, 0.3);
-
 // Mixins
 @mixin flex-center {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .counter {
-    &-container {
-        @include flex-center;
-        flex-direction: column;
-        padding: 20px;
-        border-radius: 8px;
-        box-shadow: 0 2px 4px $shadow-color;
-        background-color: $bg-color;
-        max-width: 300px;
-        margin: 20px auto;
-    }
+  &-container {
+    @include flex-center;
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 8px;
+    max-width: 300px;
+    margin: 20px auto;
+  }
 
-    &-image {
-        margin-bottom: 15px;
-    }
+  &-image {
+    margin-bottom: 15px;
+  }
 
-    &-text {
-        font-size: 18px;
-        margin-bottom: 15px;
-        color: $text-color;
-    }
+  &-text {
+    font-size: 18px;
+    margin-bottom: 15px;
+    color: var(--prp-text-primary);
+  }
 
-    &-value {
-        font-size: 24px;
-        font-weight: bold;
-        min-width: 40px;
-        text-align: center;
-        color: $text-color;
-    }
+  &-value {
+    font-size: 24px;
+    font-weight: bold;
+    min-width: 40px;
+    text-align: center;
+    color: var(--prp-text-primary);
+  }
 }

package/src/styles/dashboard.scss

@@ -0,0 +1,9 @@
+.dashboard-grid,
+.dashboard {
+  display: grid;
+  gap: 1rem;
+}
+
+.dashboard-item {
+  width: 100%;
+}

package/src/styles/details.scss

@@ -1,12 +1,3 @@
-:root {
-  --background-color: #1a1a1a;
-  --text-color: #e0e0e0;
-  --label-color: #a0a0a0;
-  --empty-value-color: #666;
-  --error-color: #ff6b6b;
-  --shadow-color: rgba(0, 0, 0, 0.3);
-}
-
 .details-page {
   padding: 2rem;
   max-width: 1200px;
@@ -17,11 +8,11 @@
   }
 
   .details-item {
-    background: var(--background-color);
+    background: var(--prp-bg-primary);
     border-radius: 8px;
     padding: 1.5rem;
     margin-bottom: 1rem;
-    box-shadow: 0 2px 4px var(--shadow-color);
+    box-shadow: 0 2px 4px var(--prp-shadow-dark);
     transition: transform 0.2s ease;
 
     &:hover {
@@ -30,7 +21,7 @@
 
     .item-label {
       font-size: 0.875rem;
-      color: var(--label-color);
+      color: var(--prp-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
       margin-bottom: 0.5rem;
@@ -38,14 +29,14 @@
 
     .item-value {
       font-size: 1rem;
-      color: var(--text-color);
+      color: var(--prp-text-muted);
       line-height: 1.5;
       word-break: break-word;
 
       &:empty {
         &::after {
           content: '—';
-          color: var(--empty-value-color);
+          color: var(--prp-text-muted);
         }
       }
     }
@@ -62,5 +53,5 @@
 .error-container {
   padding: 2rem;
   text-align: center;
-  color: var(--error-color);
+  color: var(--prp-color-error);
 }