proje-react-panel 1.2.0 → 1.3.0

package/src/decorators/form/Input.ts

@@ -11,7 +11,6 @@ export type InputTypes = 'input' | 'textarea' | 'file-upload' | 'checkbox' | 'hi
 export type ExtendedInputTypes = InputTypes | 'select';
 
 export interface InputOptions {
-  name?: string;
   type?: InputTypes;
   inputType?: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
   label?: string;
@@ -28,6 +27,7 @@ export interface ExtendedInputOptions extends Omit<InputOptions, 'type'> {
 
 export interface InputConfiguration {
   name: string;
+  isNested: boolean;
   type: ExtendedInputTypes;
   inputType: 'text' | 'email' | 'tel' | 'password' | 'number' | 'date';
   label?: string;
@@ -55,7 +55,7 @@ export function ExtendedInput(options?: ExtendedInputOptions): PropertyDecorator
     const existingInputs: string[] = Reflect.getMetadata(INPUT_KEY, target) || [];
     Reflect.defineMetadata(INPUT_KEY, [...existingInputs, propertyKey.toString()], target);
     if (options) {
-        const keyString = `${INPUT_KEY.toString()}:${propertyKey.toString()}:options`;
+      const keyString = `${INPUT_KEY.toString()}:${propertyKey.toString()}:options`;
       Reflect.defineMetadata(keyString, options, target);
     }
   };
@@ -70,9 +70,13 @@ export function getInputFields<T extends AnyClass>(
     const fields: InputOptions =
       Reflect.getMetadata(`${INPUT_KEY.toString()}:${field}:options`, prototype) || {};
     const inputType = fields?.inputType ?? (isFieldSensitive(field) ? 'password' : 'text');
+
+    // Check if field is in format translations[0].x
+    const isNested: boolean = field.match(/^[a-zA-Z]+\[\d+\]\.[a-zA-Z]+$/) !== null;
     const inputConfiguration: InputConfiguration = {
       ...fields,
-      name: fields?.name ?? field,
+      name: field,
+      isNested,
       label: fields?.label ?? field,
       placeholder: fields?.placeholder ?? field,
       inputType: inputType,

package/src/index.ts

@@ -34,5 +34,5 @@ export { Layout } from './components/layout';
 
 //AUTH
 export { Login } from './components/Login';
-
-//UTILS
+export { login } from './utils/login';
+export { logout } from './utils/logout';

package/src/store/store.ts

@@ -1,14 +1,12 @@
 import { createJSONStorage, persist } from 'zustand/middleware';
 import { createWithEqualityFn } from 'zustand/traditional';
 import { shallow } from 'zustand/vanilla/shallow';
-
-interface User {
-  username: string;
-}
+import { User } from '../types/User';
 
 interface AppState {
   user: User | null;
   login: (user: User) => void;
+  logout: () => void;
 }
 
 export const useAppStore = createWithEqualityFn<AppState>()(
@@ -16,6 +14,7 @@ export const useAppStore = createWithEqualityFn<AppState>()(
     set => ({
       user: null,
       login: (user: User) => set({ user }),
+      logout: () => set({ user: null }),
     }),
     {
       name: 'app-store-1',

package/src/styles/form.scss

@@ -12,6 +12,15 @@
   .form-field {
     margin-bottom: 16px;
 
+    input[type='text'],
+    input[type='password'],
+    input[type='email'],
+    input[type='tel'],
+    input[type='number'],
+    input[type='date'] {
+      height: 40px;
+    }
+
     input[type='text'],
     input[type='password'],
     input[type='email'],
@@ -20,6 +29,7 @@
     input[type='date'],
     textarea,
     select {
+      box-sizing: border-box;
       padding: 10px;
       font-size: 16px;
       border: 1px solid #444;
@@ -71,6 +81,7 @@
     color: white;
     border: none;
     border-radius: 5px;
+    height: 40px;
     cursor: pointer;
     transition: background-color 0.2s;
 
@@ -78,11 +89,11 @@
       background-color: #0056b3;
     }
   }
-}
 
-.label {
-  font-weight: bold;
-  margin-bottom: 6px;
-  display: block;
-  color: #f2f2f2;
+  .label {
+    font-weight: bold;
+    margin-bottom: 6px;
+    display: block;
+    color: #f2f2f2;
+  }
 }

package/src/styles/login.scss

@@ -1,93 +1,24 @@
-.login-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
-    padding: 20px;
-
-    .login-panel {
-        width: 100%;
-        max-width: 400px;
-        background: #2c2c2c;
-        border-radius: 12px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-        padding: 32px;
-    }
-
-    .login-header {
-        text-align: center;
-        margin-bottom: 32px;
-
-        h1 {
-            font-size: 24px;
-            color: #ffffff;
-            margin-bottom: 8px;
-        }
-
-        p {
-            color: #b3b3b3;
-            font-size: 14px;
-        }
-    }
-
-    .login-form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;    
-
-        .form-field {
-            width: 100%;
-            margin-bottom: 16px;
-
-            label {
-                display: block;
-                margin-bottom: 8px;
-                color: #ffffff;
-                font-weight: 500;
-            }
-
-            input {
-                width: 100%;
-                box-sizing: border-box;
-                padding: 12px 16px;
-                border: 1px solid #404040;
-                border-radius: 8px;
-                font-size: 14px;
-                background: #363636;
-                color: #ffffff;
-                transition: border-color 0.2s ease;
-                &:focus {
-                    outline: none;
-                    border-color: #0066cc;
-                    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-                }
-            }
-        }
-
-        .form-actions {
-            margin-top: 24px;
-
-            .submit-button {
-                width: 100%;
-                padding: 12px;
-                background: #0066cc;
-                color: white;
-                border: none;
-                border-radius: 8px;
-                font-size: 16px;
-                font-weight: 500;
-                cursor: pointer;
-                transition: background-color 0.2s ease;
-
-                &:hover {
-                    background: #0052a3;
-                }
-
-                &:active {
-                    transform: translateY(1px);
-                }
-            }
-        }
-    }
-}
+.login-form {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
+
+  form {
+    width: 400px;
+    background: #1a1a1a;
+    border-radius: 8px;
+    padding: 40px;
+  }
+
+  .form-header {
+    display: none;
+  }
+
+  .submit-button {
+    display: block;
+    width: 100%;
+    margin-top: 50px;
+  }
+}

package/src/types/User.ts

@@ -0,0 +1,3 @@
+export interface User {
+  username: string;
+}

package/src/utils/PreloadCacheHelper.ts

@@ -1,25 +1,18 @@
 import { SelectPreloader } from '../decorators/form/inputs/SelectInput';
 
-export type OnResult<T> = (result: { label: string; value: T }[]) => Promise<void>;
-export type OnPreload<T> = () => Promise<{ label: string; value: T }[]>;
+export type OnResult<T> = (result: { label: string; value: T }[]) => void;
 
 class PreloadCacheHelper {
   private static instance: PreloadCacheHelper;
   private cache: Map<SelectPreloader<unknown>, { label: string; value: unknown }[]>;
-  private asyncQueue: Map<
-    SelectPreloader<unknown>,
-    ((result: { label: string; value: unknown }[]) => Promise<void>)[]
-  >;
+  private asyncQueue: Map<SelectPreloader<unknown>, OnResult<unknown>[]>;
 
   private constructor() {
     this.cache = new Map();
+    this.asyncQueue = new Map();
   }
 
-  public async setOrGetCache<T>(
-    key: SelectPreloader<T>,
-    onResult: OnResult<T>,
-    onPreload: OnPreload<T>
-  ): Promise<void> {
+  public async setOrGetCache<T>(key: SelectPreloader<T>, onResult: OnResult<T>): Promise<void> {
     if (this.cache.has(key)) {
       onResult(this.cache.get(key) as { label: string; value: T }[]);
       return;
@@ -37,7 +30,7 @@ class PreloadCacheHelper {
       return;
     }
 
-    const result = await onPreload();
+    const result = await key();
     this.cache.set(key, result);
     this.asyncQueue.get(key)?.forEach(onResult => onResult(result));
     this.asyncQueue.delete(key);

package/src/utils/login.ts

@@ -0,0 +1,8 @@
+import { useAppStore } from '../store/store';
+import { User } from '../types/User';
+
+export function login(user: User, token: string, navigate: () => void) {
+  localStorage.setItem('token', token);
+  useAppStore.getState().login(user);
+  navigate();
+}

package/src/utils/logout.ts

@@ -0,0 +1,7 @@
+import { useAppStore } from '../store/store';
+
+export function logout(navigate: () => void) {
+  localStorage.removeItem('token');
+  useAppStore.getState().logout();
+  navigate();
+}